首先在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(\'渲染成功\')
})
}
}
一共获取了八条数据,先展示前三条,剩下的数据将通过上拉刷新的方式展现
然后通过上拉触底的监听事件完成加载数据
1 onReachBottom() { // 上拉触底事件 2 if(this.themeESpu.length<this.themeESpuAll.spu_list.length){ // 判断数据是否全部获取完 3 this.setData({bottomText:\'加载中。。。\'}) // 设置底部显示文字 4 wx.showLoading({ // 获取数据过程中弹出loading,避免多次上拉操作 5 title: \'玩命加载中\', 6 }) 7 setTimeout(()=>{ // 模拟服务端分页获取数据 8 // 在原数据基础上添加新数据 9 this.themeESpu=[...this.themeESpu,...this.themeESpuAll.spu_list.slice(this.themeESpu.length, this.themeESpu.length+3)] 10 11 wx.lin.renderWaterFlow(this.themeESpu, false, () => { // 重新渲染瀑布流 12 console.log(\'渲染成功\') 13 }) 14 wx.hideLoading(); // 隐藏加载框 15 this.setData({bottomText:\'\'}) // 隐藏底部文字 16 },1000) 17 }else{ 18 this.setData({bottomText:\'没有更多了\'}) // 数据全部获取完,底部文字显示“没有更多了” 19 this.bottomText=\'没有更多了\' 20 setTimeout(()=>{ // 1s后文字消失 21 this.setData({bottomText:\'\'}) 22 },1000) 23 } 24 },
效果展示
请发表评论