-

progress

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

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

属性类型默认值必填说明最低版本
percentnumber百分比0~1001.0.0
show-infobooleanfalse在进度条右侧显示百分比1.0.0
border-radiusnumber/string0圆角大小2.3.1
font-sizenumber/string16右侧百分比字体大小2.3.1
stroke-widthnumber/string6进度条线的宽度1.0.0
colorstring#09BB07进度条颜色(请使用activeColor)1.0.0
activeColorstring#09BB07已选择的进度条的颜色1.0.0
backgroundColorstring#EBEBEB未选择的进度条的颜色1.0.0
activebooleanfalse进度条从左往右的动画1.0.0
active-modestringbackwardsbackwards: 动画从头播;forwards:动画从上次结束点接着播1.7.0
durationnumber30进度增加1%所需毫秒数2.8.2
bindactiveendeventhandle动画完成事件2.4.1

示例代码

<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>


progress