progress

进度条。

效果展示

示例代码

WXML

<view class="page">
<view class="page__hd">
<text class="page__title">progress</text>
<text class="page__desc">进度条</text>
</view>
<view class="page__bd">
<view class="section section_gap">
<progress show-info/>
<progress percent="-10" show-info />
<progress percent="0" show-info />
<progress percent="1" show-info />
<progress percent="20" show-info="{{true}}" />
<view>{{res}}</view>
<progress percent="40" active bindactiveend="bindactiveend" duration="100" />
<progress percent="60" stroke-width="10" show-info />
<progress percent="60" stroke-width="{{strokeWidth}}" show-info />

<progress percent="20" activeColor="#10AEFF" />
<progress percent="30" backgroundColor="#000000" />
<progress percent="30" activeColor="#10AEFF" backgroundColor="#000000" />
<progress percent="40" border-radius="20" show-info="{{false}}" />
<progress percent="40" border-radius="{{borderRadius}}" show-info="{{false}}" />

<progress percent="50" show-info="{{true}}" font-size="30" />
<progress percent="50" show-info="{{true}}" font-size="{{30}}" />
<progress percent="50" show-info="{{true}}" font-size="{{fontSize}}" />

<progress percent="100" show-info />
<progress percent="200" show-info />

</view>
</view>
</view>

JS

Page({
data: {
res: 'res',
borderRadius: 20,
fontSize: 30,
strokeWidth: 10
},
bindactiveend:function(){
console.log("动画执行完了");
this.setData({
res: 'animation finished'
})
}
})

WXSS

progress{
margin-bottom: 30px;
}

API

属性 类型 默认值 必填 说明
percent number 百分比0~100
show-info boolean false 在进度条右侧显示百分比
border-radius number/string 0 圆角大小
font-size number/string 16 右侧百分比字体大小
stroke-width number/string 6 进度条线的宽度
active-color string #09BB07 已选择的进度条的颜色
background-color string #EBEBEB 未选择的进度条的颜色
active boolean false 进度条从左往右的动画
duration number 30 进度增加1%所需毫秒数
bindactiveend eventhandle 动画完成事件

多平台支持

属性 平台支持
percent 支付宝
show-info 支付宝
border-radius
font-size
stroke-width 支付宝
activeColor 支付宝
backgroundColor 支付宝
bindactiveend
duration
active 支付宝

注释:

支付宝percent属性在非区间[0-100]内的展示效果不一致,无percent参数展示效果不一致