繼前一篇文章，我們已經實現了小程式中的上拉載入和下拉重新整理，
如果使用者網路較差的情況下，或者服務端返回處理較慢的情況下，
那麼我們的頁面在這段時間內沒有等待提示。
或者服務端返回資料之後，我們的頁面又好像突然之間出現的，
這整個過程中的使用者體驗並不是很好，不理解什麼是使用者體驗的，
那可以換一種方式，就是說整個過程讓使用者覺得並不是很舒服。
所以通常在請求發起到請求響應的這個過程中，我們會加入loading狀態。
今天我們講解兩種小程式中的loading狀態。

“侵入式”wx.showToast

我們在index.js中的onload函式裡，在請求發起之前加入
wx.showToast({
title:'載入中',
icon:'loading',
mask:true
})

在請求響應的時候，呼叫wx.hideToast();關閉loading彈窗。
這裡的屬性都比較好理解，其中的mask指的是是否鎖定使用者互動，比如你這個請求如果是通過點選一個按鈕發起的，那你可以設定mask為true，這樣在請求響應回來之前，介面就會被‘鎖定’，使用者重複點選按鈕，不會重複發起請求。
完整程式碼如下：

執行效果如下：

當進入頁面時，會有載入中的頁面提示，當請求響應時這個彈窗會被移除。

導航欄loading wx.showNavigationBarLoading

我覺得初始化請求的資料，直接使用toast這種方式，使用者體驗並不是最好的，
因為我們每次進入一個新的頁面，都會有一個彈窗（這種互動稱為‘侵入式’互動，就是有一點點入侵感）
所以我們使用另外一種loading方式，在導航欄中loading，讓使用者知道頁面正在載入就可以了。
小程式中提供了wx.showNavigationBarLoading()的方法來實現這種功能。它通常是和wx.hideNavigationBarLoading();成對出現的，一個使用者顯示，一個用於隱藏。
我們在檢視更多頁面使用導航欄loading，方法比showToast要簡單，在需要開啟的時候，呼叫show方法，請求響應的時候呼叫hide方法即可。
如：
/**
* 頁面相關事件處理函式--監聽使用者下拉動作
*/
onPullDownRefresh: function () {
console.log("使用者下拉動作")
if (this.data.url === '') {
return;
}
var that = this;
wx.showNavigationBarLoading();
util.getMovieList(this.data.url, "檢視更多", { start: 0, count: that.data.count }).then((movieList) => {
that.setData({
movieList: util.movieDataFactory(movieList),
start: that.data.count
});
wx.stopPullDownRefresh();
wx.hideNavigationBarLoading();
})
},

執行效果：

原始碼：百度雲 連結：http://pan.baidu.com/s/1gfzlKXH 密碼：ewd8
這節課的內容就到這裡結束了。
感謝您的閱讀。
我是莽夫，希望你開心。
如果你覺得本文對你有幫助，請掃描文末二維碼，支援博主原創。
希望大家關注我的個人公眾號ionic_