更新记录
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>

收藏人数:
下载插件并导入HBuilderX
赞赏(0)
下载 11583
赞赏 0
下载 11698560
赞赏 1817
赞赏
京公网安备:11010802035340号