1、先百度搜索查看 progress 进度条组件的官方文档,该组件常用的属性如下:1. percent : 进度条显示的百分比2. show-inf泠贾高框o : 进度条右侧显示数字百分比字符;3. stroke-width : 进度条的宽度;4. activeColor : 进度条已显示部分的颜色;5. backgroundColor : 进度条未显示部分的颜色;6. active-mode :backwards,每次从头显示;forwards,每次从上次结束点开始显示。
2、在 wxml 中通过 <progress> 标签创建多个进度条组件,并配合上述常用属性,创建样式不同的进度条。
3、在 wxss 中添加上述组件使用的样式类 block 对应的样式定义。
4、保存编译,查看页面效果,页面显示的多个进度条组件,效果符合预期。
5、在 wxml 中,通过动态绑定的方式设置进度条的当前进度,并通过定时任务改变这个进度值,观察进度条的变化。
6、在 js 的 onLoad 函数中定义定时任务函数,其每2秒钟执行一次,并将进度条的进度值增加 10。
7、保存编译,在模拟器中查看页面效果,符合预期。