目录
本文字，阅读9分钟，实践40分钟
文/石桥码农
progress是进度条组件。
1）主要属性
progress组件的主要属性有：
progress进度条组件是一个很完备的组件了，不需要修改，就可以大部分场景需求。有两点需要注意：
a）前景色activeColor
默认是与小程序中success图标的颜色是相同的，都是“#09BB07”。虽然小程序框架给了开发者修改的自由，但是这个颜色并不能随便修改。程序中的设计风格要保持一致性，在其它地方，“#09BB07”这个颜色表示完成，在进度条里也应该作为前景完成色。如果想修改，所有地方都要修改。
在这张图中共有五个颜色，分别用作小程序中五类信息的颜色。同类信息保持颜色的一致性，有助于向用户提供清晰明确、主次分明的互动界面。
b）动画启动模式active-mode
这个属性默认为“backwards”，这是不合适的。一个进度条往往指示一件事情的进度，所以最好的动画启动模式是“forwards”，即每次从上次结束处开始。
在启用progress的active动画后，每走一段都是一段动画，每段动画都是基于css的动画绘制，都有时间。属性duration用于标识行走1%需要花费的时间，默认值为30毫秒。这个值越大，动画越细腻。
用于设计的标准屏幕宽度为px，人类眼睛的动画觉察阀值是毫秒，以默认值30毫秒走掉1%计算，毫秒会走掉大约25px。这个值不能大了，再大的话动画看起来就不流畅，有卡顿。30毫秒可以视为是一个在体验上可被允许的最小值。但也不可设置过大，设置大了会影响性能。
2）示例代码与最佳实践
wxml:
progressbindtap=onTapProgressBarstroke-width=2percent={{percentValue}}active-mode=forwardsactiveshow-info={{false}}bindactiveend=onProgressActiveEnd/
将宽度设置为2，启用动画，从数据源中以变量绑定动画进度，使用“forwards”作为动画启动模式，不显示百分比数字。其它颜色等，采用默认值。
js:
onTapProgressBar(e){
letprogress=this.data.percentValue
if(progress){
progress+=5
this.setData({percentValue:Math.min(,progress)})
}
}
这个示例的动画效果与文首的动画相似，只是为了方便单击演示，进度条宽度不同。
在progress组件中虽然没有bindtap这个事情属性，但tap事件是所有视图组件的基础事件，所以在这里也可以绑定事情句柄。在这个示例中，码农以onTapProgressBar这个单击后触发的函数模拟网络加载的进度事件。
每单击一次，进度+5，到时停止。每次进度值变化，都附有一个动画。动画基本是连续和细腻的。但如果加载任务小，时间短，这个动画也是一扫而过，基本是看不到的。
下面看一下相关问题：
1）如何实现一个下载文件并显示动态进度条的功能？
有人在开发者社区问到这个问题，他想实现一个下载文件并显示动态进度条的功能，但看了文档发现percent这个必须要有固定的值（类似80），但进度是一直变化的，该如何让它实现动态进度条呢？
示例代码就可以满足需求。当启用active、并将active-mode设置为”forwards”后，动画就会随下载进度动起来。
通过文件下载的总大小和已完成大小，可以实时计算出percent数值。需要注意的是，percent属性是动态绑定的，每次变化后，需要使用setData触发视图更新，不然动画是看不到的。
2）progress已选进度条如何设置圆角？
代码：
progressborder-radius=5percent=20show-info/
使用border-radius可以设置进度条外框的圆角大小，但是无法设置已选进度的圆角，即上面效果中绿色右端的圆角。
官方progress组件没有提供修改已选进度条圆角值的属性，有什么办法可以修改呢？
有人说，progress组件并不复杂，可以自己基于view组件实现一个。这也是一个办法，但若实现像progress那样功能完备的组件，没有看起来那么简单；况且，