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

首先在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)
        }
    },

效果展示