（十七）微信小程序組件---進度條

官方文檔

示例

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 , })
  },