(十七)微信小程序组件---进度条
示例
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 , }) },