• progress

    progress

    进度条。

    属性说明

    属性名类型默认值说明平台差异说明
    percentFloat无百分比0~100
    show-infoBooleanfalse在进度条右侧显示百分比
    stroke-widthNumber6进度条线的宽度，单位px
    activeColorColor#09BB07已选择的进度条的颜色
    backgroundColorColor#EBEBEB未选择的进度条的颜色
    activeBooleanfalse进度条从左往右的动画
    active-modeStringbackwardsbackwards: 动画从头播；forwards：动画从上次结束点接着播微信小程序、5+APP、H5
    @activeendEventHandle动画完成事件微信小程序

    示例

    1. <template>
    2.     <view>
    3.         <view class="uni-padding-wrap uni-common-mt">
    4.             <view class="progress-box">
    5.                 <progress percent="20" show-info stroke-width="3" />
    6.             </view>
    7.             <view class="progress-box">
    8.                 <progress percent="40" active stroke-width="3" />
    9.             </view>
    10.             <view class="progress-box">
    11.                 <progress percent="60" active stroke-width="3" backgroundColor="#999"/>
    12.             </view>
    13.             <view class="progress-box">
    14.                 <progress percent="80" activeColor="red" active stroke-width="8" />
    15.             </view>
    16.         </view>
    17.     </view>
    18. </template>

    progress - 图1

    发现错误？想参与编辑？在 GitHub 上编辑此页面！