手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

微信小程序基础内容类组件progress使用详解

时间:2024-10-12 23:14:59

1、先百度搜索查看 progress 进度条组件的官方文档,该组件常用的属性如下:1. percent : 进度条显示的百分比2. show-inf泠贾高框o : 进度条右侧显示数字百分比字符;3. stroke-width : 进度条的宽度;4. activeColor : 进度条已显示部分的颜色;5. backgroundColor : 进度条未显示部分的颜色;6. active-mode :backwards,每次从头显示;forwards,每次从上次结束点开始显示。

微信小程序基础内容类组件progress使用详解

2、在 wxml 中通过 <progress> 标签创建多个进度条组件,并配合上述常用属性,创建样式不同的进度条。

微信小程序基础内容类组件progress使用详解

3、在 wxss 中添加上述组件使用的样式类 block 对应的样式定义。

微信小程序基础内容类组件progress使用详解

4、保存编译,查看页面效果,页面显示的多个进度条组件,效果符合预期。

微信小程序基础内容类组件progress使用详解

5、在 wxml 中,通过动态绑定的方式设置进度条的当前进度,并通过定时任务改变这个进度值,观察进度条的变化。

微信小程序基础内容类组件progress使用详解

6、在 js 的 onLoad 函数中定义定时任务函数,其每2秒钟执行一次,并将进度条的进度值增加 10。

微信小程序基础内容类组件progress使用详解

7、保存编译,在模拟器中查看页面效果,符合预期。

微信小程序基础内容类组件progress使用详解
© 手抄报圈