微信小程序上滑加载下一页

九饼 - 2022-07-12 07:28:31

---

首先写了个公共方法publicNextPage，因为别的页面可能也需要上滑加载下一页，所以封装了一下，先引入

const { publicNextPage } = require('../../util/public.js')

然后页面里监听页面滚动到底部

  onReachBottom() {
      publicNextPage(
        this.data.pageIndex,
        this.data.pageCount,
        (newPageIndex)=>{
          if(newPageIndex){
            this.getList(this.data.pageSize, newPageIndex)
            this.setData({
              pageIndex:newPageIndex
            })
          }else{
            console.log('已经是最后一页!');
          }
      })
  }

可以在页面的index.json中写上"onReachBottomDistance":数值,来规定滚动到距离底部多少，例如：
"onReachBottomDistance":100,

更新参数后请求列表

getList(pageSize,pageIndex) {
  let param = {
    pageSize,
    pageIndex
  }
  myAjax('getList', 'POST', param, (res) => {
    if (res.list) {
      let newList = this.data.list.concat(res.list) // 连接数组
      this.setData({
        list:newList,
        pageCount:res.pageCount
      })
    }
  })
}

publicNextPage方法如下：

export const publicNextPage = (pageIndex, pageCount, cb) => {
  pageIndex++
  if (pageIndex < pageCount) {
    cb(pageIndex)
  } else {
    cb()
  }
}

Tags 标签

微信小程序滚动javascript

扩展阅读