progress

基础库 1.0.0 开始支持，低版本需做兼容处理。

进度条。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性类型默认值必填说明最低版本percentnumber 否百分比0~1001.0.0show-infobooleanfalse否在进度条右侧显示百分比1.0.0border-radiusnumber/string0否圆角大小2.3.1font-sizenumber/string16否右侧百分比字体大小2.3.1stroke-widthnumber/string6否进度条线的宽度1.0.0colorstring#09BB07否进度条颜色（请使用activeColor）1.0.0activeColorstring#09BB07否高亮态进度条的颜色，支持纯色与线性渐变色。默认值 "#ffca49, #ffb262"。若只填一个色值，则进度条显示为该纯色值。1.0.0backgroundColorstring#EBEBEB否未选择的进度条的颜色1.0.0activebooleanfalse否进度条从左往右的动画1.0.0active-modestringbackwards否backwards: 动画从头播；forwards：动画从上次结束点接着播1.7.0bindactiveendeventhandle 否动画完成事件2.4.1

示例代码

在开发者工具中预览效果

<view> <progress percent="20" show-info font-size="20" stroke-width="5" backgroundColor="#13BEFB" activeColor="#DE5347" /> <progress class='xxx' percent="40" stroke-width="20" border-radius="30" /> <progress percent="60" color="pink" /> <progress percent="{{nPercent}}" active /> </view> <view class='btnV'> <view class='btn1' bindtap='clickBtn'>点击开始加载</view> </view> progress{ margin-top: 50rpx; } .xxx{ width: 100rpx; } .btn1{ margin-top: 100rpx; width: 200px; height: 44px; color: white; background-color: #DE5347; display: flex; justify-content: center; align-items: center; } .btnV{ display: flex; justify-content: center; } Page({ data: { nPercent:0, flag:true, }, clickBtn:function(e){ for (let i = 0; i < 100; i++) { this.setData({ nPercent: i }) console.log(this.data.nPercent) } } })

  

以上内容来自文本：https://developers.weixin.qq.com/miniprogram/dev/component/progress.html