小程序: 进度条(progress)

代码Github地址

一. 属性说明

属性名	类型	默认值	说明
percent	Float		进度 百分比0~100
stroke-width	Number	6	进度条线的宽度，单位px。实际上是进度条的高度
backgroundColor	Color		未选择的进度条的颜色
activeColor	Color		选中的进度条的颜色
show-info	Boolean	false	是否在进度条右侧显示百分比
active	Boolean	false	是否开启进度条从左往右的动画
active-mode	String	backwards	backwards: 动画从头播；forwards：动画从上次结束点接着播

二. 代码部分

wxml

<view>

  <progress class="progress"></progress>

  <progress class="progress" percent="50" stroke-width='20'></progress>

  <progress class="progress" percent="50" backgroundColor="gray" activeColor="red"></progress>

  <progress class="progress" percent="50" show-info/>

  <progress class="progress" percent="50" show-info active/>

  <progress class="progress" percent="50" show-info active active-mode="forwards" />

</view>

• wxss

.progress {
  width: 80%;
  margin-left: 10%;
  margin-top: 50px;
}

progress的实例.png