微信小程序上划屏幕分页

2022-08-11  本文已影响0人  xsmile21

先定义变量:

data: {
    list: [], 
    pagesize: 10, // 每页展示的条数
    curpage: 1, // 当前页数
    count: 1 // 总页数
}

请求接口传参curpage与pagesize:

getList() {
    // 请求回来的数据
    var arr1 = this.data.list; // 页面此时展示的列表 (数组)
    var arr2 = res.data.data.records; // 后端返回的列表(数组)
    arr1 = arr1.concat(arr2); // 合并两个数组
    this.setData({
      list: arr1,
      count: res.data.data.pages
    })
}

onReachBottom方法:

onReachBottom: function () {
  if (this.data.curpage <= this.data.count ) {  // 这里是为了当前页数小于总页数,否则会一直刷新
    var curpage = this.data.curpage * 1 + 1;  // 上划一次当前页数加一,加载下一页
    this.setData({
      curpage: curpage  // 更新data中的页数
    })
    this.getList();  // 再次调用(获取下一页的数据)
  } else {
    wx.showToast({
      title: '暂无更多数据',  // 如果当前页数大于总页数则不会刷新并显示提示
      icon: "none"
    })
  }
}

tips:需要在json文件里进行允许上划配置

"enableReachBottom": true
上一篇 下一篇

猜你喜欢

热点阅读