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