1. 程式人生 > >微信小程式學習(18) —— 上拉載入和下拉重新整理

微信小程式學習(18) —— 上拉載入和下拉重新整理

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

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

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

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

屬性

型別

預設值

描述

enablePullDownRefresh

Boolean

false

是否開啟下拉重新整理。

示例:

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. })