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

1.下拉刷新

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

1. 需要在 .json 文件中配置。 如果配置在app.json文件中，那么整個程序都可以下拉刷新。如果寫在具體頁面的.json文件中，那么就是對應的頁面，可以下拉刷新。

具體頁面的.json文件：

{
 "enablePullDownRefresh": true
}

app.json文件:

"window": {
 "enablePullDownRefresh": true
 }

2. 在js文件中添加回調函數

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

3. 添加數據

通常情況下的下拉刷新操作，就是把查詢條件重置，讓頁面顯示最新的一頁數據。下面是筆者demo中的下拉刷新回調接口的代碼，同時也是一般情況下的操作流程。

// 下拉刷新回調接口
onPullDownRefresh: function () {
 // 我們用total和count來控制分頁，total代表已請求數據的總數，count代表每次請求的個數。
 // 刷新時需把total重置為0，代表重新從第一條請求。
 total = 0; 
 // this.data.dataArray 是頁面中綁定的數據源
 this.data.dataArray = [];
 // 網絡請求，重新請求一遍數據
 this.periphery();
 // 小程序提供的api，通知頁面停止下拉刷新效果
 wx.stopPullDownRefresh;
},

2 .上拉加載

同下拉刷新一樣，小程序中也提供了用於上拉時回調的接口。官方文檔中並沒有很詳細的介紹，經測試發現，上拉回調的接口並不需要額外的配置（下拉時需要在 .json文件中配置 "enablePullDownRefresh": true），直接在頁面滑動到底部時就能拿到回調。

1. 在js文件中添加回調函數

// 上拉加載回調接口
onReachBottom: function () {
 // 我們用total和count來控制分頁，total代表已請求數據的總數，count代表每次請求的個數。
 // 上拉時需把total在原來的基礎上加上count，代表從count條后的數據開始請求。
 total += count;
 // 網絡請求
 this.periphery();
},