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

本文主要是介绍微信小程序——下拉和上拉实现分页功能，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

首先：在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
      })
    }
  },

这篇关于微信小程序——下拉和上拉实现分页功能的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！