【progress】 进度条组件说明

progress 进度条组件

原型:

<progress
    percent="[Float(0-100)]"
    show-info="[Boolean]"
    border-radius="[Number | String]"
    font-size="[Number | String]"
    stroke-width="[Number]"
    activeColor="[Color]" 
    backgroundColor="[Color]"
    active="[Boolean]"
    active-mode="[backwards | forwards]"
>
</progress>

 

 

属性:

名称 是否必需 类型 默认值 说明
percent [Float] 百分比0~100
show-info [Boolean] false 是否在进度条右侧显示百分比
border-radius [Number / String] 0 圆角大小,单位px或rpx,默认为px (最低版本2.3.1)
font-size [Number / String] 16 右侧百分比字体大小,单位px或rpx,默认为px (最低版本2.3.1)
stroke-width [Number / String] 6 进度条线的宽度,单位px或rpx,默认为px
activeColor [Color] #09BB07 进度条颜色
backgroundColor [Color]   未选择的进度条的颜色
active [Boolean] false 进度条从左往右的动画
active-mode [backwards | forwards] backwards

进度值更新时,动画如何播放

backwards: 动画从0开始播放;

forwards:动画从上次结束点接着播;

posted @ 2018-11-07 11:02  1024记忆  阅读(959)  评论(0编辑  收藏  举报