小程序实现动态加载效果
分类:小程序开发示例
时间:2021-11-03
浏览:151
微信小程序提供了progress组件,用于实现进度条。可查看progress组件。
但今天需要实现的是动态从后台获取值,更加直观的展示出完成某功能的进度。
效果展示:
在开始写代码前,有两个属性需要了解,开发文档给出的定义如下:
percent 百分比0~100
duration 进度增加1%所需毫秒数
而我们就需要利用这两个属性,完成进度条的动态显示。
首先将完成进度增加1%所需毫秒数(duration属性)设置固定值为30ms,接着从后台获取完成此功能所需的总时间(percent),最后用active属性展示动画效果。
代码部分:
test.wxml文件
<progress percent="{{percent}}" backgroundColor="white" activeColor="green" duration="30" border-radius="20" bindtap="progress" show-info active> </progress>
test.js文件
Page({ data: { percent: 0 }, progress: function() { let that = this; let percent = xxx; //获取percent that.setData({ percent: percent }) } });
————————————————
原文链接:https://blog.csdn.net/qq_40558766/article/details/103026510
本站文章如未注明出处则为原创,转载请注明出处,如有侵权请邮件联系站长