• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

效果展示

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap