3-6 progress组件

progress

基础库 1.0.0 开始支持，低版本需做兼容处理。

进度条。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性	类型	默认值	必填	说明	最低版本
percent	number		否	百分比0~100	1.0.0
show-info	boolean	false	否	在进度条右侧显示百分比	1.0.0
border-radius	number/string	0	否	圆角大小	2.3.1
font-size	number/string	16	否	右侧百分比字体大小	2.3.1
stroke-width	number/string	6	否	进度条线的宽度	1.0.0
color	string	#09BB07	否	进度条颜色（请使用activeColor）	1.0.0
activeColor	string	#09BB07	否	高亮态进度条的颜色，支持纯色与线性渐变色。默认值 "#ffca49, #ffb262"。若只填一个色值，则进度条显示为该纯色值。	1.0.0
backgroundColor	string	#EBEBEB	否	未选择的进度条的颜色	1.0.0
active	boolean	false	否	进度条从左往右的动画	1.0.0
active-mode	string	backwards	否	backwards: 动画从头播；forwards：动画从上次结束点接着播	1.7.0
bindactiveend	eventhandle		否	动画完成事件	2.4.1

示例代码

在开发者工具中预览效果

<view>
  <progress 
  percent="20" 
  show-info 
  font-size="20"
  stroke-width="5"
  backgroundColor="#13BEFB"
  activeColor="#DE5347"
  />

  <progress
  class='xxx'
  percent="40" 
  stroke-width="20" 
  border-radius="30"
  />

  <progress percent="60" color="pink" />

  <progress 
  percent="{{nPercent}}" 
  active />
</view>

<view class='btnV'>
  <view class='btn1' bindtap='clickBtn'>点击开始加载</view>
</view>

progress{
  margin-top: 50rpx;
}

.xxx{
  width: 100rpx;
}

.btn1{
  margin-top: 100rpx;
  width: 200px;
  height: 44px;
  color: white;
  background-color: #DE5347;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btnV{
  display: flex;
  justify-content: center;
}

Page({
  data: {
    nPercent:0,
    flag:true,
  },

  clickBtn:function(e){
    for (let i = 0; i < 100; i++) {
      this.setData({
        nPercent: i
      })
      console.log(this.data.nPercent)
    }
  }
})

  

以上内容来自文本：https://developers.weixin.qq.com/miniprogram/dev/component/progress.html