在微信小程式上實現下拉重新整理、上拉載入的效果

使用系統提供的onPullDownRefresh、onReachBottom這2個事件，

前提需要在app.json或page.json配置檔案中設定，才能使用。

app.json是全應用的頁面都可以使用該事件，page.json則只是對應的頁面才可以使用。

示例：

app.json：

在app.json檔案裡設定window屬性

1. {

2. "window":{

3. "enablePullDownRefresh": true

4. }

5. }

page.json：

在page.json檔案裡直接設定屬性 

1. {

2. "enablePullDownRefresh": true

3. }

示例：

可以結合導航欄loading顯示正在載入的效果

1. Page({

2. data: {

3. pageNum: 1, // 設定載入的第幾次，預設是第一次

4. isFirstLoad: true, // 用於判斷List陣列是不是空陣列，預設true，空的陣列

5. hasMore: false, // “載入更多”

6. },

7. // 下拉重新整理

8. onPullDownRefresh: function () {

9. // 顯示導航欄loading

10. wx.showNavigationBarLoading();

11. // 呼叫介面載入資料

12. this.loadData();

13. // 隱藏導航欄loading

14. wx.hideNavigationBarLoading();

15. // 當處理完資料重新整理後，wx.stopPullDownRefresh可以停止當前頁面的下拉重新整理

16. wx.stopPullDownRefresh();

17. },

18. // 上拉載入

19. onReachBottom(e) {

20. let that = this;

21. if (that.data.hasMore) {

22. that.setData({

23. pageNum: that.data.pageNum + 1, // 每次觸發上拉事件，把pageNum+1

24. isFirstLoad: false // 觸發到上拉事件，把isFirstLoad設為為false

25. });

26. that.loadData();

27. }

28. },

29. })