更新记录
1.2.3(2023-05-18)
下载此版本
修复整体高度计算不正确的bug
1.2.2(2023-05-12)
下载此版本
新增图片加载失败处理
1.2.1(2023-05-11)
下载此版本
修复已知bug
查看更多
平台兼容性
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