小程序--自定义组件--瀑布流组件

小程序–自定义组件–瀑布流组件

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;
}