(小程序篇)19.瀑布流

说明：结合lin-ui完成瀑布流功能开发

1.组件使用

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

PS：目前只支持两列渲染

2.构建瀑布流数据

.js 中

list:[
	...
    {
    image:'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3892521478,1695688217&fm=26&gp=0.jpg',
    desc: '浅行的秋风，送来一叶知秋的美丽。相思的明月，梦亦如霜。寂寞的城，已经装不下太多疲惫的经卷，缥缈的梵音，怎可抵得上那浓浓相思里凝重的诗行。'
    },
    ...
]

3.自定义组件list

PS：目录components下
.wxml

<view class="items">
  <image src="{{data.image}}"></image>
  <view class="desc">{{data.desc}}</view>
</view>

.js

Component({
  ...
  properties: {
    // 传递值
    data: Object
  },
  ...
})

.wxss

page{
  background: #fff;
}
.items{
  margin-top: 20rpx;
  background: #fff;
  box-shadow: 0rpx 0rpx 4rpx rgba(0,0,0,0.1);
  border-radius: 10rpx;
}
.items image{
  width: 100%;
  height:310rpx;
  border-radius: 10rpx 10rpx 0 0;
}
.items .desc{
  padding:20rpx;
  font-size: 28rpx;
  color: #333;
  text-align: justify;

}

4.页面引用

.json 中导入瀑布流组件和自定义组件

 {
    "usingComponents": {
      "l-list": "../../components/list/list",
      "l-water-flow": "../../miniprogram_npm/lin-ui/water-flow"
    }
  }

.wxml 中使用

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

.js 中 构建的数据见2.构建瀑布流数据

page({
	data:{
    	list:[]
    },
    ...
    onLoad: function (options) {
      // 渲染数据
      wx.lin.renderWaterFlow(this.data.list, false ,()=>{

      })
    },
    ...
})

5.效果展示