瀑布流 WaterFlow

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

WARNING

由于微信开发者工具的bug，该组件未放在npm包内发布，使用组件需拷贝项目里的/components/water-flow文件至你的项目下，同时请将工具栏中的使用npm模块选项取消勾选。给您带来的不便敬请谅解！

使用方法

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

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

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

TIP

目前只支持两列渲染。

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

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

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

  1.   // demo.js
  2. Component({
  3.   /**
  4.    * 组件的属性列表
  5.    */
  6.   properties: {
  7.     data:Object
  8.   },
  10.   /**
  11.    * 组件的初始数据
  12.    */
  13.   data: {
  15.   },
  17.   /**
  18.    * 组件的方法列表
  19.    */
  20.   methods: {
  22.   }
  23. })

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

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

TIP

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

  1. <!-- demo.wxml -->
  2. <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">
  3.   <view class='life-product-contianer'>
  4.     <view class='art-content'>{{data.describe}}</view>
  5.     <view class='peice-container'>
  6.       <l-price unit="￥" count="{{data.count}}" count-color="#ad0e11" unit-color="#ad0e11" count-size="36"></l-price>
  7.       <l-price l-class="del-price" unit="￥" count="{{data.delCount}}" count-color="#ad0e11" unit-color="#ad0e11" delete del-color="#666" count-color="#666" unit-color="#666"></l-price>
  8.     </view>
  9.   </view>
  10. </l-card>

TIP

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

  1. /* demo.wxss */
  2. .life-container {
  3.   width: 350rpx !important;
  4.   padding: 0 0 20rpx 0 !important;
  5.   background-color: #fff !important;
  6.   box-shadow: 0px 8rpx 20rpx 0px rgba(9, 36, 66, 0.04) !important;
  7.   border-radius: 16rpx !important;
  8.   overflow: hidden;
  9.   margin-bottom: 20rpx;
  10. }
  12. .life-img {
  13.   width: 350rpx !important;
  14.   height: 380rpx !important;
  15. }
  17. .life-product-contianer {
  18.   padding: 0 10rpx;
  19.   display: flex;
  20.   flex-direction: column;
  21. }
  23. .life-title {
  24.   margin-left: 10rpx !important;
  25. }
  27. .tag {
  28.   height: 30rpx !important;
  29.   line-height: 30rpx !important;
  30. }
  32. .art-content {
  33.   font-size: 28rpx;
  34.   color: #999;
  35.   margin-top: 15rpx;
  36.   display: flex;
  37.   flex-wrap: wrap;
  38. }

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

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

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

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

wx.lin.renderWaterFlow()支持传入两个参数，第一个参数为data即为传入的数据信息，第二个参数success为渲染成功后的回调函数。

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,()=>{
      console.log('渲染成功')
    })
  }
})

列间距

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

示例代码

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

瀑布流属性（WaterFlow Attributes）

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