瀑布流 WaterFlow

适用于展示卡片宽度相同、高度不一致的场景中，根据高度排列卡片位置。

使用方法

本组件使用了抽象节点，与其他组件使用方法略有不同，对实现原理感兴趣的同学可以参考微信小程序文档关于抽象节点的章节。

瀑布流组件使用步骤如下：

1. 封装一个自定义组件接收数据。
2. 在需要使用瀑布流组件的页面同时引入瀑布流组件和自定义组件。
3. 传入数据渲染瀑布流。

TIP

目前只支持两列渲染。

使用组件之前，因为要自行封装一个承载数据的组件，所以要对组件封装有一定经验，当然您也可以参考demo的源码进行一定的修改。

下面介绍下如何封装承载数据组件。

假设我们创建了一个叫做l-demo的组件。在l-demo组件的js的文件中写入以下代码即可。

  // demo.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    data:Object
  },
  /**
   * 组件的初始数据
   */
  data: {
  },
  /**
   * 组件的方法列表
   */
  methods: {
  }
})

上面的data就是我们要进行渲染的数据，这是经过组件内部处理过的，可以直接进行数据绑定。

假设l-demo组件是以下的wxml结构。

TIP

温馨提示：可以对card组件进行二次封装哦，当然也可以自行编写wxml结构。

<!-- demo.wxml -->
<l-card full type="cover" image="{{data.image}}" title="{{data.title}}" l-class="life-container" l-img-class="life-img" l-title-class="life-title" bindtap="onProduct">
  <view class='life-product-contianer'>
    <view class='art-content'>{{data.describe}}</view>
    <view class='price-container'>
      <l-price unit="￥" value="{{data.count}}" value-color="#ad0e11" unit-color="#ad0e11" value-size="36"></l-price>
      <l-price l-class="del-price" unit="￥" value="{{data.delCount}}" value-color="#ad0e11" unit-color="#ad0e11" deleted del-color="#666" value-color="#666" unit-color="#666"></l-price>
    </view>
  </view>
</l-card>

TIP

以下wxss为示例代码仅供参考，请根据实际情况编写。

/* demo.wxss */
.life-container {
  width: 350rpx !important;
  padding: 0 0 20rpx 0 !important;
  background-color: #fff !important;
  box-shadow: 0px 8rpx 20rpx 0px rgba(9, 36, 66, 0.04) !important;
  border-radius: 16rpx !important;
  overflow: hidden;
  margin-bottom: 20rpx;
}
.life-img {
  width: 350rpx !important;
  height: 380rpx !important;
}
.life-product-contianer {
  padding: 0 10rpx;
  display: flex;
  flex-direction: column;
}
.life-title {
  margin-left: 10rpx !important;
}
.tag {
  height: 30rpx !important;
  line-height: 30rpx !important;
}
.art-content {
  font-size: 28rpx;
  color: #999;
  margin-top: 15rpx;
  display: flex;
  flex-wrap: wrap;
}

OK，l-demo组件封装好以后，接下来就可以渲染瀑布流了。

在使用瀑布流组件页面的json文件中同时引入water-flow和封装好的l-demo组件。

<l-water-flow generic:l-water-flow-item="l-demo"/>

启动渲染最重要的一步，就是在需要渲染的时候调用wx.lin.renderWaterFlow()（比如在onLoad生命周期中）并传入需要渲染的数据，然后就可以完成组件的渲染。

wx.lin.renderWaterFlow()支持传入三个参数，第一个参数为data即为传入的数据信息，第二个参数为refresh为是否刷新数据(删除之前渲染的数据，重新渲染)。

TIP

该组件内部已经实现保存了历史数据，在实际应用场景中，经常会采用分页获取数据的方法，第二次渲染传入新的数据即可，请勿合并第一次的数据传入，造成数据的重复。

Page({
  data: {
    demo:[{
      image: '../image.png',
      title: '显瘦中长款系带风衣',
      describe: '柔软顺滑、上身挺括显瘦，垂坠飘逸、不易皱好打理。',
      count: '888',
      delCount: '666'
    }，{
      image: '../image.png',
      title: '显瘦中长款系带风衣',
      describe: '柔软顺滑、上身挺括显瘦，垂坠飘逸、不易皱好打理。',
      count: '888',
      delCount: '666'
    }，{
      image: '../image.png',
      title: '显瘦中长款系带风衣',
      describe: '柔软顺滑、上身挺括显瘦，垂坠飘逸、不易皱好打理。',
      count: '888',
      delCount: '666'
    }]
  },
  onLoad(options) {
    wx.lin.renderWaterFlow(this.data.demo, false ,()=>{
      console.log('渲染成功')
    })
  }
})

列间距

通过column-gap属性可设置瀑布流列间距。

示例代码

<l-water-flow generic:l-water-flow-item="l-demo" column-gap="20rpx"/>

瀑布流属性（WaterFlow Attributes）

瀑布流子项事件（WaterFlowItem Events）