小程序开发-第三章第三节正在加载,loading状态-全栈工程师之路-中级篇

简介: 小程序开发-第三章第三节正在加载,loading状态-全栈工程师之路-中级篇

继前一篇文章,我们已经实现了小程序中的上拉加载和下拉刷新,
如果用户网络较差的情况下,或者服务端返回处理较慢的情况下,
那么我们的页面在这段时间内没有等待提示。


或者服务端返回数据之后,我们的页面又好像突然之间出现的,
这整个过程中的用户体验并不是很好,不理解什么是用户体验的,
那可以换一种方式,就是说整个过程让使用者觉得并不是很舒服。


所以通常在请求发起到请求响应的这个过程中,我们会加入loading状态。
今天我们讲解两种小程序中的loading状态。

“侵入式”wx.showToast


我们在index.js中的onload函数里,在请求发起之前加入

wx.showToast({ 
title:'加载中', 
icon:'loading', 
mask:true 
})


在请求响应的时候,调用wx.hideToast();关闭loading弹窗。
这里的属性都比较好理解,其中的mask指的是是否锁定用户交互,比如你这个请求如果是通过点击一个按钮发起的,那你可以设置mask为true,这样在请求响应回来之前,界面就会被‘锁定’,用户重复点击按钮,不会重复发起请求。
完整代码如下:

image.png


运行效果如下:

image.png


当进入页面时,会有加载中的页面提示,当请求响应时这个弹窗会被移除。

导航栏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(); 
}) 
},


运行效果:

image.png



这节课的内容就到这里结束了。
感谢您的阅读。
我是莽夫,希望你开心。

目录
相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
17天前
|
小程序 Android开发
|
6天前
|
小程序 云计算 Android开发
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)
22 3
|
11天前
|
小程序 云计算 开发者
|
12天前
|
小程序
|
13天前
|
小程序 数据安全/隐私保护
|
12天前
|
小程序
|
18天前
|
小程序
|
18天前
|
人工智能 小程序
【一步步开发AI运动小程序】五、帧图像人体识别
随着AI技术的发展,阿里体育等公司推出的AI运动APP,如“乐动力”和“天天跳绳”,使云上运动会、线上健身等概念广受欢迎。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。文章分为四部分:初始化人体识别功能、调用人体识别功能、人体识别结果处理以及识别结果旋转矫正。下篇将继续介绍人体骨骼图绘制。
|
16天前
|
小程序