小程序–自定义组件–瀑布流组件
2020年7月18日 23:24:45
自定义瀑布流组件,没有引用额外的任何包。
支持图片样式自定义,标题样式自定义,标题不传可使用节点。
默认将所有数据及当前分页数据分离,便于图片加载速度,
可通过isNoramalDataOrList=true变为只是用总数据集合,
如果有问题,可通过Gitee留言。
小程序代码片段
https://developers.weixin.qq.com/s/HEn7iWmp7ziS
Gitee
https://gitee.com/yangyushu/yys-waterfallFlow
yys-waterfallFlow 小程序–组件–瀑布流
效果图
暴露方法
<yys-waterfallFlow
noramalData='{{ pageData }}'
middleGap='{{ middleGap }}'
cuSlotHeight1='60'
bind:clickDom='test'
>
<view wx:for="{{ pageInfo }}" wx:for-item="item" slot="slot-{{item.id}}">
<view class='page_slot'>
<spen>ID:{{ item.id }}</spen>
<spen class='zdy-spen'>自定义标题</spen>
</view>
</view>
</yys-waterfallFlow>
bind:clickDom='test' // 将组件内点击方法暴露到test方法
组件入参
入参 | 作用 | 类型 | 是否必须 |
---|---|---|---|
noramalData | 组件使用基础数据 | Array | 是 |
middleGap | 瀑布中间间距 | String | 否 |
waterfallGap | 瀑布标题高度 | Number | 否 |
isNoramalDataOrList | 只使用单个集合(默认否) | Boolean | 否 |
cuSlotHeight1 | 是否传入自定义节点高度,如果传入则不调用获取节点高度,加快运行(单位px) | Number | 否 |
入参详细
参数 noramalData
属性 | 作用 | 是否必须 |
---|---|---|
id | 数据ID(因为ID关联节点,重复ID会被筛选掉) | 是 |
image | 展示图片 | 是 |
title | 展示标题(如果不传title则可使用节点) | 否 |
[
{id:'数据ID',image:'图片路径1',title:'图片标题1'},
{id:'数据ID',image:'图片路径1',title:'图片标题1'},
]
自定义样式
图片样式
属性名称 | 作用范围 |
---|---|
class-image | 所有图片 |
class-image-left | 左瀑布图片 |
class-image-right | 右瀑布图片 |
实例
wxml
<yys-waterfallFlow
noramalData='{{ pageInfo }}'
class-image='waterfall-image'
class-image-left='waterfall-image-left'
class-image-right='waterfall-image-right'
></yys-waterfallFlow>
wxss
/* 瀑布图片整体样式 */
.waterfall-image{
border-radius: 10px;
}
/* 左瀑布图片样式 */
.waterfall-image-left{
margin-left: 10px;
border: 1px solid red;
}
/* 右瀑布图片样式 */
.waterfall-image-right{
margin-right: 10px;
border: 1px solid rebeccapurple;
}