目录

progress

优质
小牛编辑
128浏览
2023-12-01

progress

进度条。

属性名类型默认值说明
percentFloat百分比 0~100
show-infoBooleanfalse在进度条右侧显示百分比
stroke-widthNumber6进度条线的宽度,单位 px
colorColor#F0250F进度条颜色 (请使用 activeColor)
activeColorColor已选择的进度条的颜色
backgroundColorColor未选择的进度条的颜色
activeBooleanfalse进度条从左往右的动画
active-modeStringbackwardsbackwards: 动画从头播;forwards:动画从上次结束点接着播
border-radiusnumber/string0圆角大小
font-sizenumber/string16右侧百分比字体大小
durationnumber30进度增加1%所需毫秒数
bindactiveendeventhandle动画完成事件

示例

<!--progress.jxml-->
<view class="page-section ">
    <view class="progress-bar">
        <progress percent="20" show-info />
    </view>
    <view class="progress-bar">
        <progress percent="40" stroke-width="12" />
    </view>
    <view class="progress-bar">
        <progress percent="60" active-color="blue" />
    </view>
    <view class="progress-bar">
        <progress percent="80" active />
    </view>
</view>