【Kevin Learn 小程序】--＞progress

效果图

属性

参考：​​progress​​

代码

1. app.js

//app.js
App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  },
  globalData: {
    hasLogin: false
  }
})

2. app.json

{
  "pages": [
    "pages/progress/progress"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

3. progress.js

Page({
  data: {
    percentValue: 0
  },
  onLoad() {
    let timer;
    timer = () => {
      setTimeout(() => {
        const value = this.data.percentValue;
        this.setData({
          percentValue: value < 100 ? value + 10 : value
        });
        timer()
      }, 2000);
    }
    timer();
  }
})

4. progress.json

{
  "navigationBarTitleText": "进度条"
}

5. progress.wxml

<view class="block">
    <progress percent="20" show-info />
</view>
<view class="block">
    <progress percent="40" stroke-width="12" />
</view>
<view class="block">
    <progress percent="60" color="pink" />
</view>
<view class="block">
    <progress percent="80" active />
</view>
<view class="block">
    <progress percent="50" activeColor="#13c3a1" backgroundColor="#fff" />
</view>
<!-- active-mode -->
<view class="block">
    <progress percent="{{percentValue}}" show-info active active-mode="backwords"/>
</view>

6. progress.wxss

.block {
    margin: 10px auto;
}