微信小程序實現下拉刷新

• 本文將簡單介紹如何實現微信小程序的下拉刷新
• 將要使用的api：
  1. wx.showNavigationBarLoading(Object object)
  2. wx.showLoading(Object object)
  3. wx.hideLoading(Object object)
  4. wx.hideNavigationBarLoading(Object object)
  5. wx.stopPullDownRefresh(Object object)
  6. wx.request(Object object)

    //刷新
    onRefresh(){
        //在當前頁面顯示導航條加載動畫
        wx.showNavigationBarLoading(); 
        //顯示 loading 提示框。需主動調用 wx.hideLoading 才能關閉提示框
        wx.showLoading({
          title: '刷新中...',
        })
        this.getData();
      },
    //網絡請求，獲取數據
    getData(){
    	wx.request({
            url: '',
            //網絡請求執行完后將執行的動作
            complete(res){
                //隱藏loading 提示框
                wx.hideLoading();
                //隱藏導航條加載動畫
                wx.hideNavigationBarLoading();
                //停止下拉刷新
                wx.stopPullDownRefresh();
      	  	}
    	})   
    },
    /**
     * 頁面相關事件處理函數--監聽用戶下拉動作
     */
    onPullDownRefresh: function () {
        //調用刷新時將執行的方法
    	this.onRefresh();
    }

除了在js頁面編寫響應的邏輯之外，還需要再相應頁面的json中寫入以下配置，這個配置允許這個頁面進行下拉刷新動作

    {
         "enablePullDownRefresh": true
    }

特別需要注意的是：

• 寫之前先看看有無已經存在的onPullDownRefresh:function()函數，否則將不能監聽到用戶的下拉刷新動作
• 注意相關api的配對使用
• 不要忘了在需要刷新結束時調用wx.stopPullDownRefresh()，否則，頁面將會保持下拉狀態、不會回彈。·

此外，除了下拉刷新，有時候可能是在某個事件進行時觸發刷新動作，此時可以調用wx.startPullDownRefresh(Object object) 此api的作用是：“ 開始下拉刷新。調用后觸發下拉刷新動畫，效果與用戶手動下拉刷新一致。”