全棧工程師之路-中級篇之小程序開發-第三章第三節正在加載，loading狀態

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