阅读(1773) (0)

微信小程序内容组件 progress

2016-09-22 22:38:55 更新

progress

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

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

属性 类型 默认值 必填 说明 最低版本
percent number 百分比0~100 1.0.0
show-info boolean false 在进度条右侧显示百分比 1.0.0
border-radius number/string 0 圆角大小 2.3.1
font-size number/string 16 右侧百分比字体大小 2.3.1
stroke-width number/string 6 进度条线的宽度 1.0.0
color string #09BB07 进度条颜色(请使用activeColor) 1.0.0
activeColor string #09BB07 已选择的进度条的颜色 1.0.0
backgroundColor string #EBEBEB 未选择的进度条的颜色 1.0.0
active boolean false 进度条从左往右的动画 1.0.0
active-mode string backwards backwards: 动画从头播;forwards:动画从上次结束点接着播 1.7.0
duration number 30 进度增加1%所需毫秒数 2.8.2
bindactiveend eventhandle 动画完成事件 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