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 上编辑此页面！