18.小程序上拉加載和下拉刷新

在微信小程序上實現下拉刷新、上拉加載的效果

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

前提須要在app.json或page.json配置文件中設置，才能使用。

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

示例：

app.json：

在app.json文件裏設置window屬性

page.json：

在page.json文件裏直接設置屬性 

示例：

結合導航欄loading顯示正在加載的效果

Page({  

  data: {  

    pageNum: 1,       // 設置加載的第幾回，默認是第一次  

    isFirstLoad: true,   // 用於判斷List數組是否是空數組，默認true，空的數組  

    hasMore: false,    // 「加載更多」  

  },  

  // 下拉刷新  

  onPullDownRefresh: function () {  

    // 顯示導航欄loading  

    wx.showNavigationBarLoading();  

    // 調用接口加載數據  

    this.loadData();  

    // 隱藏導航欄loading  

    wx.hideNavigationBarLoading();  

    // 當處理完數據刷新後，wx.stopPullDownRefresh能夠中止當前頁面的下拉刷新  

    wx.stopPullDownRefresh();  

  },  

  // 上拉加載  

  onReachBottom(e) {  

    let that = this;  

    if (that.data.hasMore) {  

      that.setData({  

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

        isFirstLoad: false                // 觸發到上拉事件，把isFirstLoad設爲爲false  

      });  

      that.loadData();  

    }  

  },  

})