npm install mp-waterfall

Required*

• The project root directory must have templates/waterfall-item.wxml

templates/waterfall-item.wxml

<template name="waterfall-item">
    <view class="item" catchtap="onItemClick" data-item="{{item}}">
        <image src="{{item.image}}" mode="widthFix"></image>
        <view>{{channelSource}}</view>
        <text>{{item.desc}}</text>
    </view>
</template>

Focus*

name is must waterfall-item

The template receives two fields: item, channelSource

Demo

• json

{
  "usingComponents": {
    "mp-waterfall": "mp-waterfall/mp-waterfall/mp-waterfall"
  }
}

• wxml

<view class="box">
    <mp-waterfall bind:getData="getData" id="waterfall" catchonItemClick="onItemClick" data="{{list}}" columns="{{2}}" delay="{{120}}" rowGap="40rpx" columnGap="40rpx" channelSource="recommend" events="onItemClick, handleTap">
    </mp-waterfall>
</view>

Important tip

Drive the way the page is updated

1: You can use data properties to drive component updates (local changes can work with component methods to drive component updates)

2: You can update components by component methods: append, prepend, clear, remove, refresh

Note: The component is bound to getData to get the latest data state within the component

append(data)、 prepend(data)、 clear()、 remove(condition), refresh(condition, newVal), update(condition, newVal)

refresh is an alias for update and has the same function of partially refreshing (updating) the UI

---

解释同上:

驱动页面更新的途径

1：你可以通过data属性驱动组件更新 （局部变化可以配合组件方法驱动组件更新）

2：你可以通过组件方法： append、prepend、clear、remove、refresh 更新组件

注意：组件上绑定getData来获取组件内部最新数据状态

append(data)、 prepend(data)、 clear()、 remove(condition), refresh(condition, newVal), update(condition, newVal)

refresh 是 update的别名，作用相同，局部刷新(更新)UI

Note: The component is bound to getData to get the latest data state within the component

• js

Page({
  data: {
    list: [],
  },
  onItemClick(data) {
    console.log(data)
  },
  getData({ detail }) {
    console.log(detail.result)
  },
  updateData({detail}) {
    const item = detail.id
    this.selectComponent('#waterfall').refresh({id: item.id}, val)
  },
})

Note *

If your data is likely to change state internally, you can update the UI using this.selectComponent(selector).refresh(condition, newVal)

this.selectComponent('#waterfall').refresh(condition, newVal)

you can get condition from item

• wxss

.box {
  width: 100vw;
  height: 100vh;
  padding: 0 20rpx;
  box-sizing: border-box;
}

.item {
}

.item image {
  width: 100%;
}