小程序简单的下拉分页处理,利用的onReachBottom(页面上拉触底事件的处理函数)

挺简单的,就自己做了一个开关,控制是否下拉到最后一页,道理最后一页则关闭开关,第一页的时候打开开关,直接看代码吧

data: {
	pageNo: 1, // 页码的递进数,当前页码
    allPage: 1, // 总页数
    canPull: true, // 下拉是否触发
}
getData(pageNo) {
    http.getRequest('/common/shop/cart', { pageNo: pageNo},
      (res) => {
        if (res && res.code == 1) {
          if (pageNo == 1) {
            this.setData({ canPull: true }) // 初始化下拉开关
            this.setData({
              shopList: res.data.pagedata,
              allPage: Math.ceil(res.data.dataRow / res.data.pageSize) // 总页数
            })
          } else {
            if (this.data.allPage <= pageNo) { // 到了最后一页,关闭开关,翻页失效
              this.setData({ canPull: false })
            }
            var newshopList = this.data.shopList.concat(res.data.pagedata) // 大于1页的拼接
            this.setData({
              shopList: newshopList
            })
          }
          this.goodsCount()
        }
        
      },
      (err) => {
        console.log(err);
      });
  },
/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (this.data.canPull) {
      // 显示加载图标
      wx.showLoading({
        title: '玩命加载中',
      })
      this.setData({
        pageNo: ++this.data.pageNo
      })
      this.getData(this.data.pageNo)
      setTimeout(() => {
        // 隐藏加载框
        wx.hideLoading();
      }, 1000)
    }
    
  },

交互可能还需要优化一下,还要下拉到最后的温馨提示等等。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值