041 ∞ 基础：progress

不二如是

                               
登录/注册后可看大图

上一讲我们搞定了富文本，本次来学习progress。

progress，进度条。

常用属性：

属性名	类型	默认值	说明
percent	Float	无	百分比0~100
show-info	Boolean	false	在进度条右侧显示百分比
stroke-width	Number	6	进度条线的宽度，单位px
color	Color	#09BB07	进度条颜色 （请使用 activeColor）
activeColor	Color	已选择的进度条的颜色
backgroundColor	Color		未选择的进度条的颜色
active	Boolean	false	进度条从左往右的动画
active-mode	String	backwards	backwards: 动画从头播；forwards：动画从上次结束点接着播 (基础库 1.7.0 开始支持，低版本需做兼容处理。)

index.wxml：

<progress percent="30" show-info />
<progress percent="40" stroke-width="12" />
<progress percent="60" color="pink" />
<progress percent="80" active />

---

课后作业


1、补充代码实现一条进度为30%并且在右侧显示百分比的进度条：

<？ percent="？"  ？/>

答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢小程序，请订阅 专辑☞（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

一笙彤

0