更新记录
1.3.0(2021-03-09) 下载此版本
更改为uni-modules组件
1.2.0(2021-01-07) 下载此版本
优化app端性能
1.1.8(2020-05-30) 下载此版本
添加使用说明,及工程示例
查看更多平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
- | - | √ | √ | √ | √ | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - | - | - |
瀑布流组件
一、概述
自定义瀑布流组件,兼容nvue与vue页面
二、属性及说明
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
width | Number/String | 750rpx | [可选]描述瀑布流的最佳列数,column-width 和 column-count 都指定非0值, 则 column-count 代表最大列数 |
column-count | Number | [可选]描述瀑布流的最佳列数,column-width 和 column-count 都指定非0值, 则 column-count 代表最大列数 | |
column-width | String/Number | [可选]描述瀑布流每一列的列宽 | |
column-gap | String/Number | 0 | [可选]列与列的间隙 |
left-gap | String/Number | 0 | [可选]左边的间隙 |
right-gap | String/Number | 0 | [可选]右边的间隙 |
show-scrollbar | Boolean | false | 是否显示滚动条 |
@loadmore | EventHandle | nvue页面使用 | |
@scroll | EventHandle | vue页面使用 | |
@scrolltolower | EventHandle | vue页面使用 |
三、使用方法
- 参考原生瀑布流组件
- 可使用setSpecialEffects方法,使用方法参考原生waterfall组件
- 使用示例参考商城项目
<xg-waterfall>
<xg-waterfall-header>
</xg-waterfall-header>
<xg-waterfall-item>
</xg-waterfall-item>
<xg-waterfall-footer>
</xg-waterfall-footer>
</xg-waterfall>