（十七）微信小程序组件---进度条

官方文档

示例

1
<progress percent="20" show-info />
2
<progress percent="40" stroke-width="12" />
3
<progress percent="60" color="pink" />
4
<progress percent="80" active />

 这些 percent 一般来自后台js

示例：

# js数据 
data: {
    imageList:[
      { id: 1, title: "图片1", percent: 20 },
      { id: 2, title: "图片2", percent: 20 },
      { id: 3, title: "图片3", percent: 20 }
    ]
  },

# wxml
<view wx:for="{{imageList}}">
  <text>{{item.title}}</text>
  <progress percent="{{item.percent}}"></progress>
</view>
<button bindtap="changeImagePercent">点击</button>

# changeImagePercent 函数

changeImagePercent:function(){
    // 方式一 就是个错误
    /*
    this.setData({
      imageList[0].percent: 30 
    })
    */
    // 方式二 不推荐 全部替换imageList数据
    /*
    var data = this.data.imageList
    data[0].percent=80
    this.setData({
      imageList:data
    })
    */
    // 方式三 推荐
    var num = 2

    this.setData({
      ["imageList[0].percent"]: 60 ,
      ["imageList[1].title"]: "进度条进度条" ,
      ["imageList["+ num +"].percent"]: 60 ,
    })
  },