全栈工程师之路-中级篇之小程序开发-第三章第三节正在加载，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_