微信小程序—progress(进度条)

官网api：https://mp.weixin.qq.com/debug/wxadoc/dev/component/progress.html

进度条是一种用户体验很好的加载状态，如软件升级下载进度， 视频，图片下载进度，以及上传等，
效果图如下，

1.index.js中：

//index.js
//获取应用实例
const app = getApp()
var isFirst = true;
var isSiFirst = true;
Page({
  data: {
    percent: "20",
    sw: 6,
    pc: '#00ff00',
    pbc: '#cccccc',
    isActive: true,
    isSi: true,
  },

  onLoad: function () {

  },
  //进度条输入事件
  progressInput: function (e) {
    this.setData({
      percent: e.detail.value
    })
  },
  //设置宽度事件
  swInput: function (e) {
    this.setData({
      sw: e.detail.value
    })
  },
  //设置进度条颜色事件
  pcInput: function (e) {
    this.setData({
      pc: e.detail.value
    })
  },
  //未选择的进度条的颜色事件
  pbcInput: function (e) {
    this.setData({
      pbc: e.detail.value
    })
  },
  //设置进度条从左往右的动画
  bindButton: function (e) {
    console.log(isFirst);
    if (isFirst == true) {
      isFirst = false;
      this.setData({
        isActive: false,
      })
    } else {
      isFirst = true;
      this.setData({
        isActive: true,
      })
    }
  },
  //设置进度条右侧显示百分比
  bindButton1: function (e) {
    if (isSiFirst == true) {
      isSiFirst = false;
      this.setData({
        isSi: false,
      })

    } else {
      isSiFirst = true;
      this.setData({
        isSi: true,
      })
    }

  },
})

2.index.wxml:

<progress class="progress" percent="{{percent}}" show-info="{{isSi}}" stroke-width="{{sw}}" activeColor="{{pc}}" backgroundColor="{{pbc}}" active="{{isActive}}" active-mode="forwards">
</progress>

<view class="section">
  <input placeholder="设置进度" type="number" bindinput="progressInput" confirm-type="done" focus/>
</view>
<view class="section">
  <input placeholder="设置宽度" type="number" bindinput="swInput" confirm-type="done" focus/>
</view>
<view>
  <view class='text'>设置进度条颜色(请使用十六进制颜色值,例如：#ff00ff)</view>
  <input class="section" placeholder="" value="#" bindinput="pcInput" confirm-type="done" focus/>
</view>
<view>
  <view class='text'>未选择的进度条的颜色(请使用十六进制颜色值,例如：#ff00ff)</view>
  <input class="section" placeholder="" value="#" bindinput="pbcInput" confirm-type="done" focus/>
</view>

<button class='btn' bindtap="bindButton">设置/取消进度条从左往右的动画</button>
<button class='btn' bindtap="bindButton1">设置/取消进度条右侧显示百分比</button>

3.index.wxss中：

/**index.wxss**/

.progress {
  width: 95%;
  margin: 20rpx;
}

.section {
  width: 93%;
  margin: 20rpx;
  background-color: #ccc;
  padding: 10rpx;
  font-size: 30rpx;
}

.btn {
  width: 95%;
  margin-top: 10rpx;
}

.text {
  width: 100%;
  font-size: 30rpx;
}

4.demo下载：

http://download.csdn.net/download/afanbaby/10156767

本人菜鸟一个，有什么不对的地方希望大家指出评论，大神勿喷，希望大家一起学习进步！