更新记录

1.2.3(2023-05-18)

修复整体高度计算不正确的bug

1.2.2(2023-05-12)

新增图片加载失败处理

1.2.1(2023-05-11)

修复已知bug

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × ×

瀑布流布局,采用相对定位,支持有图片和无图片的瀑布流,支持列表内插入数据,支持列表删除数据(比如商品列表长按不感兴趣)。 主键一定要设置,因为更新需要根据主键比较新旧list,删除、插入等 例如[{goods:{id:1}}] 主键就是goods.id,[{id:1}],主键就是id 虽然叫felx-waterfall但是它不是flex布局的,因为最开始想做flex布局但是移除或者新增的时候列表内元素的移动动画可能实现不了,就改了相对定位来实现

属性说明

参数 说明 类型 是否必填 可选值 默认值
value 渲染的列表 Array - -
primaryKey 列表的item中的主键,比如id String - -
column 列数 Number 2 2
columnGap 列之间的间距(单位是px/rpx、无单位默认px) String - 10

使用组件

    <ls-flex-waterfall primaryKey="moment.id" @clickItem="goDetail" @longpressItem="onLongpressItem" :value="list">
        <!-- #ifdef MP-WEIXIN -->
        <view v-for="(item,index) in list" slot="slot{{item.moment.id}}">
            <!-- 自定义内容 -->
        </view>
        <!-- #endif -->
        <!-- #ifndef MP-WEIXIN -->
        <template v-slot:default="item">
            <!-- 自定义内容 -->
        </template>
        <!-- #endif -->
    </ls-flex-waterfall>

事件说明

事件名称 说明 回调参数
@@clickItem item点击事件 返回对应item的index
@longpressItem item长按事件 返回对应的item的index

说明

1.因为开发app需求,但是页面不能用nvue,nvue的waterfall组件不能用,以到处找瀑布流,效果都不太好。只能自己动手撸一个。已知问题是没支持多列,只支持两列,只有图片的没做,因为我用不到哈哈,需要的直接改代码。 2.图片加载失败未处理,这个我没遇到过,可能后续会处理 ,如果加载失败,可在onerror事件里设置imageHeight固定值,然后返回loaded事件 3.有问题可以加群沟通368126260

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问