微信小程序day02_12之基础组件 进度条

day02的所有代码
https://gitee.com/jaythc/wxxcx_learen/tree/master/day02

一. 进度条组件的介绍

progress 组件为进度条
有如下的这些属性

二. 代码示例

1. 进度条的属性的演示

一个简单的进度条如下, 显示的效果如下图,

<progress 
percent='35' 
show-info='true'
stroke-width='20'
activeColor='pink'
backgroundColor='yellow'
active='true'
>
</progress>

2. 事件触发的进度条

<progress 
percent=" {{mypercent}} "
show-info='true'
stroke-width='20'
activeColor='pink'
backgroundColor='yellow'
active='true'
active-mode="forwards"
>
</progress>
<view bindtap='addPercent'>addPercent </view>

js如下

// pages/progress/progress.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      mypercent : 15
  } ,
  addPercent: function(){
    var newPercent = this.data.mypercent+10;
    this.setData({
      mypercent: newPercent
    })
  }
})

在页面中点击 addPercent, 会把进度条进行增加10 , 并且是从动画从上次结束点接着播. 用的是active-mode属性的forwards值

官方文档
https://developers.weixin.qq.com/miniprogram/dev/component/progress.html