评论

微信小程序实现分页加载,触底加载下一页,滚动加载

微信小程序实现分页加载,触底加载下一页,滚动加载

这里我就不写wxml了,就是一个列表循环,直接看js代码逻辑,注释都写在代码后面了,这个方法可以实现无限滚动加载,直到加载完最后一条数据,也可以实现触底没数据后,二次触底可以从新加载刷新,学废了就给个三联把,感谢!

data: {
    orderList: [],
    pageSize: 10,
    pageNum: 1,
  },
  /**
   * 上拉触底 onReachBottom微信自带的触底函数
   */
  onReachBottom: function () {
    if (this.data.pageNum * this.data.pageSize == this.data.orderList.length) { 
    // 数据列表的数量刚好等于页数*每页条数,可以请求下一页
      this.setData({
        pageNum: this.data.pageNum + 1, // 一般上拉触底是为了加载更多分页数据,所以这里页数自增
      });
        this.getorderList() // 查询列表方法
    } else { 
    // 数据列表的数量不等于页数*每页条数,说明当前页数据不足10条,已经没有更多数据了
      this.setData({
        noMor: true  // 这里在页面最底部显示一排文字,没有更多数据了
      })
    }
  },


 // 获取列表数据方法
 getorderList() {
 	app.http.getOrder({
        pageNum: this.data.pageNum,
        pageSize: this.data.pageSize
      }).then(res => {
        if (res.data.length == 0) { //请求的数据为空,没有数据
          if (this.data.pageNum == 1) { // 第一页都没有数据,直接显示暂无数据
            this.setData({
              noData: true,
            })
          } else { // 不为第一页时,请求的数据为空,说明没有更多数据了,把pageNum减一,是为了下次触底可以继续请求刷新,万一有了新数据也可以正常显示出来
            this.setData({
              noMor: true,
              pageNum: this.data.pageNum - 1
            })
          }
        } else// 请求的结果有数据额
          if (res.data.length == this.data.pageSize) { // 请求的数据为10条,说明下一页可能还有数据,列表添加上新的数据,把其他状态设为不显示
            this.setData({
              orderList: [...this.data.orderList, ...res.data],
              noMor: false,
              noData: false
            })
          } else { // 请求的数据没有10条,说明下一页已经暂时没有数据了,列表添加上新的数据,底部显示暂无更多数据
            this.setData({
              orderList: [...this.data.orderList, ...res.data],
              noMor: true,
              noData: false
            })
          }
        }
      })},
点赞 1
收藏
评论

3 个评论

  • dreamhunter
    dreamhunter
    2022-03-31

    感谢分享

    2022-03-31
    赞同 1
    回复
  • feibinyangV
    feibinyangV
    02-20

    这不能无限加载吧,当数据量过大时候(比如2w+条),占用内存过大,小程序会崩掉

    02-20
    赞同
    回复
  • 谷阳
    谷阳
    2022-10-27

    报错了,app is not defined

    2022-10-27
    赞同
    回复 1
    • 路遥知马力
      路遥知马力
      2023-10-19
      app是作者自定义的api,你肯定要根据自己的业务写请求啊
      2023-10-19
      回复
登录 后发表内容