微信小程序---进度条&data局部修改值

最新推荐文章于 2022-12-31 15:49:58 发布

骑猪去兜风z1

最新推荐文章于 2022-12-31 15:49:58 发布

阅读量2.8k

点赞数

分类专栏：微信小程序文章标签：微信小程序 elementui vue.js

本文链接：https://blog.csdn.net/qq_52385631/article/details/123079127

版权

微信小程序专栏收录该内容

32 篇文章 5 订阅

订阅专栏

本文介绍了如何在HTML和JavaScript中使用`<progress>`元素实现进度条，并探讨了如何通过JavaScript灵活地更新多个进度条的值，特别是当需要局部修改数据时，展示了三种高效的数据操作方式。

摘要由CSDN通过智能技术生成

1. 进度条

1.1 html

<progress percent="{{percent1}}"  ></progress>

<progress percent="{{percent2}}" activeColor="#DC143C" ></progress>

1.2. js

data: {
    percent1:20,
    percent2:50,
  },

2. 局部修改data数据

2.1 html

<view>-----案例------</view>
<view>点击按钮完成，将图片1的进度条更新为80%</view>
<view wx:for="{{imageList}}">
  <view>{{item.title}}</view>
  <progress percent="{{item.percent}}"  ></progress>
</view>

<button bindtap="changePercent" >点击</button>

2.2 js

  data: {
    percent1:20,
    percent2:50,
    imageList:[
      {id:1,title:"图片1",percent:20},
      { id: 1, title: "图片2", percent: 30 },
      { id: 1, title: "图片3", percent: 60 },
    ]
  },
  changePercent:function(){
    // 方式1：错误
    /*
    this.setData({
      imageList[0].person: 80
    });
    */
    
    // 方式2：可以，由于需要全部修改，所以性能差。
    /*
    var dataList = this.data.imageList;
    dataList[0].percent = 80;
    this.setData({
      imageList: dataList
    });
    */
    
    // 方式3：推荐
    var num = 2;
    this.setData({
      ["imageList[0].percent"]:80,
      ["imageList[" + num + "].percent"]: 90,
      ["imageList[1].title"]:"突突突突突"
    })

  },