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