微信小程序修改data中数组所包含对象的属性值，微信小程序自定义tabbar

微信小程序修改data中数组所包含对象的属性值

最近写了很多小程序，但是有一个比较特殊，就是tabbar的样式，没有组件可以用，这也就意味着ctrl+c和ctrl+v没办法用咯/(ㄒoㄒ)/~~。
那就只能手写啦，tabbar都会有一个点击改变图标样式的效果，所以打算声明一个list数组，里面包含每个大对象，包含文字啊，不选中图标样式和选中图标样式啥的等等，emmm前面写的很开心，后面发现，欸我要改变样式的话，这个数组里面的对象也要修改哇，那咋改？

1. 添加一个变量，来记录当前的图标样式
2. 定义点击函数，获取页面的number值
3. 重新渲染
   具体代码就是这样子的：

页面

<view class="mainbox"> 
    <view class="item-box" wx:for="{{list}}" wx:key="index" >
      <image src="{{item.now}}" mode="aspectFit" style="{{item.normalstyle}}" bindtap="onchange" data-num="{{item.number}}"/>
    </view>
</view>

JavaScript脚本

list:[
      {
        number:0,
        normal:'../../image/0-0.png',
        active:'../../image/0-1.png',
        normalstyle:'width:60px;height:30px',
        now:'../../image/0-0.png',   //这个就是我用来存储当前样式的值
      },
      {
        number:1,
        normal:"../../image/1-0.png",
        active:"../../image/1-1.png",
        normalstyle:'width:60px;height:30px',
        now:"../../image/1-0.png",
      },
      {
        number:2,
        normal:'../../image/flower-0.png',
        active:"../../image/flower-1.png",
        normalstyle:'width:60px;height:80px;margin-bottom:15px;',
        now:'../../image/flower-0.png',
      },
      {
        number:3,
        normal:"../../image/2-0.png",
        active:"../../image/2-1.png",
        normalstyle:'width:60px;height:30px',
        now:"../../image/2-0.png",
      },
      {
        number:4,
        normal:"../../image/4-0.png",
        active:"../../image/4-1.png",
        normalstyle:'width:60px;height:30px',
        now:"../../image/4-0.png",
      }
    ]

定义函数：

methods: {
    onchange(e)
    {
      const num=e.target.dataset.num
      for(var i=0;i<5;i++)    //遍历一下全部修改为普通样式
      {
        var a='list['+i+'].now'   //这里一定要在外面定义，setdata里面是不允许这样子写的
        var b=this.data.list[i].normal  //同理
        this.setData({
            [a]:b    //前面的a要加上[]表示引用外部变量
        })
      }
      var a='list['+num+'].now'
      var b=this.data.list[num].active
      this.setData({   //设置选中样式
        [a]:b   
      })
    }
  }

完成啦！
效果：