小程序使用 onReachBottom 处理分页数据

移动端处理分页列表,每次处理都要重新思考,比较烦,这里记录一下,以后直接复制:
1、在出发加载更多的方法里面

onReachBottom(e){
	//当前页
    let page = this.data.page; 
    //接口返回的总页数大于当前页,则当前页累加
    if(this.data.totalPage > page){
      page++
      this.setData({page});
    }
    //获取数据
    this.getBenefit()
  },

2、在获取数据的位置,接口调取成功之后

//接口返回数据
let list = res.data.data;
//如果当前页面缓存列表数据为空,或者当前已缓存列表数据不等于接口返回列表数据总数,说明接口数据没有在缓存中,数据拼接缓存;否则则是数据完全请求并缓存,直接return
if(this.data.list.length == 0 || this.data.list.length != this.data.total){
  list = [...this.data.list, ...list]
}else{
  return
}
this.setData({
  list,
  totalPage:res.data.meta.last_page,
  total:res.data.meta.total
})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值