progress
进度条。组件属性的长度单位默认为px，支持传入单位(rpx/px)。
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| percent | Float | 无 | 否 | 百分比0~100 | |
| show-info | Boolean | false | 否 | 在进度条右侧显示百分比 | |
| border-radius | Number/String | 0 | 否 | 圆角大小 | |
| font-size | Number/String | 16 | 否 | 右侧百分比字体大小 | |
| stroke-width | Number/String | 6 | 否 | 进度条线的宽度 | |
| color | String | #000000 | 否 | 进度条右侧百分比颜色 | |
| activeColor | String | #00cac4 | 否 | 已选择的进度条的颜色 | |
| backgroundColor | String | #ebebeb | 否 | 未选择的进度条的颜色 | |
| active | Boolean | false | 否 | 进度条从左往右的动画 | |
| active-mode | String | backwards | 否 | backwards: 动画从头播；forwards：动画从上次结束点接着播 | |
| duration | Number | 30 | 否 | 进度增加1%所需毫秒数 | |
| bindactiveend | EventHandle | 动画完成事件 |
示例代码：
<view class="container">
<view class="statement">进度条。</view>
<view mc:for="{{items}}" >
<progress id="{{item.id}}" style="margin-top: 20rpx;"
percent="{{item.percent}}"
show-info="{{item.showInfo}}"
stroke-width="{{item.strokeWidth}}"
border-radius="{{item.borderRadius}}"
font-size="{{item.fontSize}}"
color="{{item.color ? item.color : '#333'}}"
backgroundColor="{{item.backgroundColor ? item.backgroundColor : '#ebebeb'}}"
active="{{item.active}}"
activeColor="{{item.activeColor || '#00cac4'}}"
duration="{{item.duration || 0}}"
active-mode="{{item.activeMode}}"
bindactiveend="bindactiveend"
></progress>
</view>
<view bindtap="setPercent" class="view-option" style="margin-top:40rpx;" hover-class="view-option-hover">随机percent</view>
<view class="cssname">bindactiveend：动画完成事件, 参数event.detail</view>
<text space="nbsp" user-select="true" class="scrollDetail">{{activeendDetail}}</text>
</view>
// pages/component/pages/progress/progress.js
Page({
data: {
items: [
{ id: 'progress1', percent: 50, showInfo: false, strokeWidth: 6 },
{ id: 'progress2', percent: 60, showInfo: true, strokeWidth: 8, activeColor: 'blue', fontSize: 24, active: false, duration: 0 },
{ id: 'progress3', percent: 70, showInfo: false, strokeWidth: 10, backgroundColor: 'red', active: true },
{ id: 'progress4', percent: 80, showInfo: true, strokeWidth: 12, fontSize: 16, active: true, activeMode: 'backwards', duration: 10, color: 'red' },
{ id: 'progress5', percent: 80, showInfo: true, strokeWidth: 14, fontSize: 16, borderRadius: 14, active: true, activeMode: 'forwards', duration: 10, activeColor: 'green' },
]
},
setPercent: function(){
var m = 0, n = 100;
var obj = {};
for(var i = 0; i < this.data.items.length; i++){
if (i == this.data.items.length - 1) {
obj['items[' + i + '].percent'] = obj['items[' + (i - 1) + '].percent']
}
else {
obj['items[' + i + '].percent'] = Math.floor(Math.random() * (m - n + 1)) + n;
}
}
this.setData(obj)
},
bindactiveend: function(e){
this.setData({
activeendDetail: JSON.stringify(e, null, 2)
})
}
})