微信小程序修改data中数组所包含对象的属性值
最近写了很多小程序,但是有一个比较特殊,就是tabbar的样式,没有组件可以用,这也就意味着ctrl+c和ctrl+v没办法用咯/(ㄒoㄒ)/~~。
那就只能手写啦,tabbar都会有一个点击改变图标样式的效果,所以打算声明一个list数组,里面包含每个大对象,包含文字啊,不选中图标样式和选中图标样式啥的等等,emmm前面写的很开心,后面发现,欸我要改变样式的话,这个数组里面的对象也要修改哇,那咋改?
- 添加一个变量,来记录当前的图标样式
- 定义点击函数,获取页面的number值
- 重新渲染
具体代码就是这样子的:
页面
<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
})
}
}
完成啦!
效果: