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

  1. 首先写了个公共方法publicNextPage,因为别的页面可能也需要上滑加载下一页,所以封装了一下,先引入
const { publicNextPage } = require('../../util/public.js')
  1. 然后页面里监听页面滚动到底部
  onReachBottom() {
      publicNextPage(
        this.data.pageIndex,
        this.data.pageCount,
        (newPageIndex)=>{
          if(newPageIndex){
            this.getList(this.data.pageSize, newPageIndex)
            this.setData({
              pageIndex:newPageIndex
            })
          }else{
            console.log('已经是最后一页!');
          }
      })
  }
  1. 更新参数后请求列表
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
      })
    }
  })
}
  1. publicNextPage方法如下:
export const publicNextPage = (pageIndex, pageCount, cb) => {
  pageIndex++
  if (pageIndex < pageCount) {
    cb(pageIndex)
  } else {
    cb()
  }
}

你可能感兴趣的:(微信小程序上滑加载下一页)