progress

进度条。

属性名类型默认值说明
percentFloat无百分比 0~100
show-infoBooleanfalse在进度条右侧显示百分比
stroke-widthNumber6进度条线的宽度，单位 px
colorColor#F0250F进度条颜色 （请使用 activeColor）
activeColorColor已选择的进度条的颜色
backgroundColorColor未选择的进度条的颜色
activeBooleanfalse进度条从左往右的动画
active-modeStringbackwardsbackwards: 动画从头播；forwards：动画从上次结束点接着播

示例

  1. <!--progress.jxml-->
  2. <view class="page-section ">
  3.     <view class="progress-bar">
  4.         <progress percent="20" show-info />
  5.     </view>
  6.     <view class="progress-bar">
  7.         <progress percent="40" stroke-width="12" />
  8.     </view>
  9.     <view class="progress-bar">
  10.         <progress percent="60" active-color="blue" />
  11.     </view>
  12.     <view class="progress-bar">
  13.         <progress percent="80" active />
  14.     </view>
  15. </view>

progress - 图1