小程序根据数组下标更改数组里的值

在web开发时，我们想操作DOM对象可以通过ID，class等属性指定DOM组件，但是小程序没这个功能，不过小程序官方也给了操作方法，接下来，我们看一下

动态操作数组

官方

changeItemInArray: function() {
    // you can use this way to modify a danamic data path
    this.setData({
      'array[0].text':'changed data'
    })
  },
  changeItemInObject: function(){
    this.setData({
      'object.text': 'changed data'
    });
  },

其实看到这个我们也就理解改如何操作了，我还是会附上工作中如何动态更改数组的值

例子

只要把对应的参数，改成你自己的就可以了

view

<view>
<view class="center" wx:for="{{imgList}}" wx:key="{{index}}">
   <image src="{{item.imgUrl}}" id="{{index}}"></image>
</view>

<view class="center_bottom" bindtap="toggle" data-index="{{index}}">

</view>

js

toggle: function (e) {   // view里绑定的时间  自己绑定下
    // console.log(e)
    var index = e.target.index;    // 获取下标
    let imgUrl= 'imgList['+index+'].imgUrl';  // 根据下标获取值
    console.log(imgUrl);
    this.setData({
      [imgUrl]: !this.data.catalog[index].imgUrl// 更改值
    })
  }

 

微信小程序页面在动态替换值时，页面也会跟着刷新一遍，也就是数组更新了值，页面上也会相应的刷新