继前一篇文章，我们已经实现了小程序中的上拉加载和下拉刷新，
如果用户网络较差的情况下，或者服务端返回处理较慢的情况下，
那么我们的页面在这段时间内没有等待提示。
或者服务端返回数据之后，我们的页面又好像突然之间出现的，
这整个过程中的用户体验并不是很好，不理解什么是用户体验的，
那可以换一种方式，就是说整个过程让使用者觉得并不是很舒服。
所以通常在请求发起到请求响应的这个过程中，我们会加入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_
