微信小程序 下拉刷新 上拉加载

Posted 2020-09-01 学无止尽tpf

1.下拉刷新

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

1. 需要在 .json 文件中配置。 如果配置在app.json文件中，那么整个程序都可以下拉刷新。如果写在具体页面的.json文件中，那么就是对应的页面，可以下拉刷新。

具体页面的.json文件：

1 {
2  "enablePullDownRefresh": true
3 }

app.json文件:

1 "window": {
2  "enablePullDownRefresh": true
3  }

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

// 下拉刷新回调接口
onPullDownRefresh: function () {
 // do somthing
},

3. 添加数据

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

 1 // 下拉刷新回调接口
 2 onPullDownRefresh: function () {
 3  // 我们用total和count来控制分页，total代表已请求数据的总数，count代表每次请求的个数。
 4  // 刷新时需把total重置为0，代表重新从第一条请求。
 5  total = 0; 
 6  // this.data.dataArray 是页面中绑定的数据源
 7  this.data.dataArray = [];
 8  // 网络请求，重新请求一遍数据
 9  this.periphery();
10  // 小程序提供的api，通知页面停止下拉刷新效果
11  wx.stopPullDownRefresh;
12 },

2 .上拉加载

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

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

1 // 上拉加载回调接口
2 onReachBottom: function () {
3  // 我们用total和count来控制分页，total代表已请求数据的总数，count代表每次请求的个数。
4  // 上拉时需把total在原来的基础上加上count，代表从count条后的数据开始请求。
5  total += count;
6  // 网络请求
7  this.periphery();
8 },