小程序开发-第三章第三节正在加载,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



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

目录
相关文章
|
13天前
|
人工智能 小程序
一步步开发AI运动小程序】二、引入插件
随着人工智能技术的发展,阿里体育等公司推出的“乐动力”、“天天跳绳”等AI运动APP广受欢迎。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。内容包括新建uni-app项目、配置插件、部署模型、安装依赖包、全局初始化和调用插件对象。
|
12天前
|
小程序 搜索推荐 数据挖掘
跳绳打卡小程序开发多钱费用
跳绳打卡小程序通过智能手机即可轻松使用,无需额外设备,只需一根跳绳即可开始您的健康之旅。它结合了便捷性、互动性和个性化设置,让跳绳这项运动变得更加有趣和高效
|
13天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
266 1
|
10天前
|
存储 传感器 小程序
跳绳计数小程序开发系统
首先,我们需要明确跳绳计数小程序的核心功能:为用户提供跳绳计数的便捷方式。这意味着小程序需要能够准确地记录用户的跳绳次数,并为用户提供清晰、直观的计数展示。
|
10天前
|
人工智能 编解码 小程序
【一步步开发AI运动小程序】四、小程序如何抽帧
随着AI技术的发展,阿里体育等公司推出的“乐动力”、“天天跳绳”等APP使云上运动会、线上健身等概念备受关注。本文将引导您从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”。文中详细介绍了微信小程序抽帧的相关API、设置及注意事项,帮助开发者更好地实现AI运动功能。下篇将介绍人体识别技术,敬请期待。
|
11天前
|
传感器 存储 小程序
跳绳计数小程序开发
跳绳计数小程序旨在通过智能设备(如手机或智能手表)记录用户在跳绳过程中的次数、时间、速度等关键数据,为用户提供便捷的运动记录和数据分析服务
|
10天前
|
小程序 搜索推荐 前端开发
小剧场短剧影视小程序开发
小剧场短剧影视小程序旨在为用户提供一个便捷、互动的平台,让用户能够随时随地观看、分享和评论各类小剧场短剧。通过小程序,用户可以浏览热门短剧、搜索感兴趣的内容、参与社区互动,以及享受个性化的推荐服务。
|
11天前
|
小程序 搜索推荐 前端开发
短剧小程序开发案例
首先,明确你的短剧平台的目标用户群体和他们的需求。比如,年轻用户可能更倾向于轻松、幽默的短剧内容,而家庭用户则可能更偏爱教育、亲子类的短剧。了解用户需求有助于你设计更符合他们口味的功能和界面
|
11天前
|
机器学习/深度学习 人工智能 小程序
【一步步开发AI运动小程序】三、运动识别处理流程
随着人工智能技术的发展,阿里体育等公司推出的“乐动力”、“天天跳绳”等AI运动APP备受关注。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。文章介绍了视频帧、帧率FPS、抽帧和人体识别等基本概念,并详细说明了处理流程,包括抽帧、人体识别检测、骨骼图绘制和运动分析等步骤。下篇将介绍如何在小程序中实现抽帧。
|
13天前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
147 0