Description: Complete waterfall flow function development with LIN-UI

1. Use components

  • Encapsulate a custom component to receive data.
  • Introduce both the Waterfall flow component and the custom component on the page that needs to use it.
  • Incoming data renders the waterfall stream.

PS: Currently only two columns are supported

2. Build waterfall stream data

In the.js

List: [... {image: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3892521478, & FM = 26 & gp = 0. 1695688217 JPG', The moon of acacia, the dream is also like frost. The lonely city, has not loaded too many tired scrolls, dimly known sans-ma, how can be equal to the heavy lines of poetry in the thick acacia. '},...]Copy the code

3. Customize the component list

PS: directory components under.wxml

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

.js

Component({ ... Properties: {// pass value data: Object},... })Copy the code

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

}
Copy the code

4. Page references

Json to import waterfall flow components and custom components

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

WXML in use

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

See 2. Build Waterfall Stream Data for the data built in.js

page({ data:{ list:[] }, ... OnLoad: function (options) {// render data wx.lin.renderWaterFlow(this.data.list, false,()=>{})},... })Copy the code

5. Effect display