progress
更新时间：2024-11-13 20:32:03
progress
进度条。组件属性的长度单位默认为px
属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| percent | number | 百分比0~100 | ||
| show-info | boolean | false | 在进度条右侧显示百分比 | |
| border-radius | number,string | 0 | 圆角大小 | |
| font-size | number,string | 16 | 右侧百分比字体大小 | |
| stroke-width | number,string | 6 | 进度条线的宽度 | |
| color | string | #09BB07 | 进度条颜色（请使用activeColor） | |
| active-color | string | #09BB07 | 已选择的进度条的颜色 | |
| background-color | string | #EBEBEB | 未选择的进度条的颜色 | |
| active | boolean | false | 进度条从左往右的动画 | |
| active-mode | string | backwards | backwards: 动画从头播；forwards：动画从上次结束点接着播 | |
| duration | number | 30 | 进度增加1%所需毫秒数 | |
| bindactiveend | eventhandle | 动画完成事件 |
扫码预览
组件示例
xhsml
<view class="page-section page-section-gap">
<view class="progress-box">
<progress percent="20" show-info stroke-width="3"/>
</view>
<view class="progress-box">
<progress percent="40" active stroke-width="3" />
<icon class="progress-cancel" type="cancel"></icon>
</view>
<view class="progress-box">
<progress percent="60" active stroke-width="3" />
</view>
<view class="progress-box">
<progress percent="80" color="#10AEFF" active stroke-width="3" />
</view>
</view>