progress

优质

小牛编辑

135浏览

2023-12-01

progress

进度条。

属性名	类型	默认值	说明
percent	Float	无	百分比 0~100
show-info	Boolean	false	在进度条右侧显示百分比
stroke-width	Number	6	进度条线的宽度，单位 px
color	Color	#F0250F	进度条颜色（请使用 activeColor）
activeColor	Color		已选择的进度条的颜色
backgroundColor	Color		未选择的进度条的颜色
active	Boolean	false	进度条从左往右的动画
active-mode	String	backwards	backwards: 动画从头播；forwards：动画从上次结束点接着播
border-radius	number/string	0	圆角大小
font-size	number/string	16	右侧百分比字体大小
duration	number	30	进度增加1%所需毫秒数
bindactiveend	eventhandle		动画完成事件

示例

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