小程序-实现列表-加载下一页数据功能(1)

加载数据的方法loadMore(),逻辑如下图:

源码如下:

data: {
      category: {},//分类
      shops: [],//列表
      pageIndex: 0,//当前页码
      pageSize: 20,//每页条数
      totalCount: 0,//总条数
      hasMore: true,//是否加载更多
      searchShowed: false,
      searchText: ''//查询文字
},

loadMore() {
    // 有数据,加载
    if (this.data.hasMore){
      // 构造查询条件
      let pageIndex = this.data.pageIndex
      let pageSize = this.data.pageSize
      let searchText = this.data.searchText
      let params = {
        _page: ++pageIndex,
        _limit: pageSize
      }
      // 判断是否有查询条件
      if (searchText) params.q = searchText
      return fetch(`/categories/${this.data.category.id}/shops`, params)
        .then(res => {
          var totalCount = parseInt(res.header['X-Total-Count'])
          // 一开始就设置为true,后面根据逻辑重置这个数据
          var hasMore = true
          if (totalCount <= this.data.pageSize) {//第一页
            hasMore = false
          } else {//非第一页:<时true,如:40<80;=时false,如:80<80
            hasMore = params._page * this.data.pageSize < totalCount
          }
          const shops = this.data.shops.concat(res.data)//追加前几页的数据
          // 把改变的数据均同步到页面中
          this.setData({
            shops,
            totalCount,
            pageIndex,
            hasMore
          })
        })
    }else{
      return
    }
  },

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

佛佛ง

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值