小程序: 进度条(progress)

一. 属性说明

属性名	类型	默认值	说明
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

文章转载于:https://www.jianshu.com/p/e9fd64b86e93

原著是一个有趣的人,若有侵权,请通知删除

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了，原文地址《小程序: 进度条(progress)》