1. 程式人生 > >全棧工程師之路-中級篇之小程式開發-第三章第三節正在載入,loading狀態

全棧工程師之路-中級篇之小程式開發-第三章第三節正在載入,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_
這裡寫圖片描述