微信小程序上拉加载瀑布流

首先在data里先声明三个容器

然后在onload钩子里初始化数据

async onLoad(options) {
　　this.themeESpuAll = await Theme.getHomeLocationESpu() // 获取全部数据
　　if (this.themeESpuAll) {
    　　this.themeESpu = this.themeESpuAll.spu_list.slice(0, 3) // 取前三给themeESpu
    　　wx.lin.renderWaterFlow(this.themeESpu, false, () => { // 渲染瀑布流
        　　console.log('渲染成功')
    　　})
　　}
}

一共获取了八条数据，先展示前三条，剩下的数据将通过上拉刷新的方式展现

 

 然后通过上拉触底的监听事件完成加载数据

onReachBottom() { // 上拉触底事件
        if(this.themeESpu.length<this.themeESpuAll.spu_list.length){ // 判断数据是否全部获取完
            this.setData({bottomText:'加载中。。。'}) // 设置底部显示文字
            wx.showLoading({  // 获取数据过程中弹出loading，避免多次上拉操作
                title: '玩命加载中',
            })
            setTimeout(()=>{ // 模拟服务端分页获取数据
                // 在原数据基础上添加新数据
                this.themeESpu=[...this.themeESpu,...this.themeESpuAll.spu_list.slice(this.themeESpu.length, this.themeESpu.length+3)]

                wx.lin.renderWaterFlow(this.themeESpu, false, () => { // 重新渲染瀑布流
                    console.log('渲染成功')
                })
                wx.hideLoading(); // 隐藏加载框
                this.setData({bottomText:''})  // 隐藏底部文字
            },1000)
        }else{
            this.setData({bottomText:'没有更多了'}) // 数据全部获取完，底部文字显示“没有更多了”
            this.bottomText='没有更多了'
            setTimeout(()=>{ // 1s后文字消失
                this.setData({bottomText:''})
            },1000)
        }
    },

效果展示