微信小程序——下拉和上拉实现分页功能

首先:在app.json的 window 选项中或页面json文件里配置 enablePullDownRefresh

{
  "enablePullDownRefresh": true,
}

1.data中定义

1. pageSize 每一页数据条数(这个需根据需求自定义) currentPage 第几页(一般从0开始,即第一页)
2. total_count 数据总条数(一般从后台拉取)
 data: {
    // 分页
    pageSize: 10,
    currentPage: 0,
    total_count:0,
  },

2.拉取数据调用接口中将data中的pageSize ,currentPage 当做字段传递给后端;并且从此接口获取到的数据要有total_count 数据总条数(分页判断用)

3.微信小程序自带函数

// 下拉刷新
  onPullDownRefresh() {
    var that = this;
    if (that.data.currentPage === 0) { 判断是否为第一页
       that.getSaleGoods() //调取页面获取数据的函数
     }
     wx.stopPullDownRefresh() //停止刷新
    } else { //不是第一页时
      that.data.currentPage = that.data.currentPage - 1;
      that.getSaleGoods()
      wx.stopPullDownRefresh()
    }
  },

// 上拉加载
  onReachBottom() {
    console.log(this.data.ORDER_SUM_TOTAL);
    var that = this;
    if (that.data.ORDER_SUM_TOTAL > 10 * (that.data.currentPage + 1)) {
      // 页数+1
      that.data.currentPage = that.data.currentPage + 1;
      that.getSaleGoods()
    } else {
      wx.showToast({
        title: '没有更多数据了~',
        icon: 'none',
        duration: 1000,
        mask: true
      })
    }
  },
上一篇:【YOLOv4探讨 之七】利用Darknet在YOLOv4中添加注意力机制模块 系列之SE模块


下一篇:程序员的自我修养---ELF文件格式