您当前的位置: 首页 > 知识百科 > 微信小程序分页刷新怎么设置

微信小程序分页刷新怎么设置

时间:2023-07-01 14:05 阅读数:21 人阅读 分类:知识百科

  想要实现小程序分页的功能,无非就是为了让小程序页面呈现的数据更方便用户浏览。微信小程序分页刷新的实现方法主要有两种,分别是上拉刷新和下拉刷新,接下来小编就为大家简要介绍一下开发步骤。

  一、小程序下拉刷新

  小程序页面集成了下拉功能,并提供了小程序接口,我们只需要一些配置就可以拿到事件的回调。

  1. 需要在 .json 文件中配置。(.json 文件的格式和 app.json与具体页面的.json文件的区别,前文已经讲过,有疑问的可以移步。) 如果配置在app.json文件中,那么整个程序都可以下拉刷新。如果写在具体页面的.json文件中,那么就是对应的页面,可以下拉刷新。

  具体页面的.json文件:

  {

  "enablePullDownRefresh": true

  }123

  app.json文件:

  "window": {

  "enablePullDownRefresh": true

  }123

  2. 在js文件中添加回调函数

  // 下拉刷新回调接口

  onPullDownRefresh: function () {

  // do somthing

  },1234

  3. 添加微信小程序数据

  通常情况下的下拉刷新操作,就是把查询条件重置,让页面显示最新的一页数据。下面是笔者demo中的下拉刷新回调接口的代码,同时也是一般情况下的操作流程。

  // 下拉刷新回调接口

  onPullDownRefresh: function () {

  // 我们用total和count来控制分页,total代表已请求数据的总数,count代表每次请求的个数。

  // 刷新时需把total重置为0,代表重新从第一条请求。

  total = 0;

  // this.data.dataArray 是页面中绑定的数据源

  this.data.dataArray = [];

  // 网络请求,重新请求一遍数据

  this.periphery();

  // 小程序提供的api,通知页面停止下拉刷新效果

  wx.stopPullDownRefresh;

  },

  二、小程序上拉刷新

  同下拉刷新一样,小程序中也提供了用于上拉时回调的接口。小程序官方文档中并没有很详细的介绍,经测试发现,上拉回调的接口并不需要额外的配置(下拉时需要在 .json文件中配置 "enablePullDownRefresh": true),直接在页面滑动到底部时就能拿到回调。

  1. 在js文件中添加回调函数

  // 上拉加载回调接口

  onReachBottom: function () {

  // 我们用total和count来控制分页,total代表已请求数据的总数,count代表每次请求的个数。

  // 上拉时需把total在原来的基础上加上count,代表从count条后的数据开始请求。

  total += count;

  // 网络请求

  this.periphery();

  },

  以上就是微信小程序分页刷新实现的两种方式了,下拉刷新和上拉刷新都能够达到分页刷新的目的,具体的开发步骤也都在文中了,还有不懂的地方请在微信小程序商店搜索相关资料。

  

  微信小程序分页加载开发实例

  微信小程序下拉分页源码

  微信小程序分页效果,小程序分页滑动效果怎么弄