更新记录
1.3.0(2021-03-09)
下载此版本
更改为uni-modules组件
1.2.0(2021-01-07)
下载此版本
优化app端性能
1.1.8(2020-05-30)
下载此版本
添加使用说明,及工程示例
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 app-vue app-nvue |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
× |
× |
× |
× |
× |
瀑布流组件
一、概述
自定义瀑布流组件,兼容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>