#
瀑布流 WaterFlow

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

# 使用方法

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

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

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

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"/>

# 瀑布流属性

参数	说明	类型	可选值	默认值
column-gap	瀑布流列间距	String	-	20rpx

# 瀑布流子项事件

事件名称	说明	返回值	备注	版本号
bind:linitemtap	点击瀑布流子项回调事件	自定义传入的子项数据	-	0.8.2

← 卡片 Card 相册Album →