微信小程序循环数组展示数据点击当前改变当前按钮状态

Html:

<view class="container" wx:for="{{arr}}" wx:key="*"> //这里循环数组

<view class="content">{{item.content}}</view>

<view class="btn">

<image src="../../images/me.png" wx:if="{{item.status==true}}" data-index="{{index}}" bindtap="statusClick"></image>

<image src="../../images/me1.png" wx:if="{{item.status==false}}" data-index="{{index}}" bindtap="statusClick"></image>

</view>

</view>

 

Css:

.container {padding: 0 30rpx; box-sizing: border-box; height: 200rpx;}

.content{display: inline-block; width: 70%; height: 200rpx; line-height: 200rpx;}

.btn {display: inline-block; width: 30%; height: 200rpx; line-height: 200rpx; text-align: center;}

.btn image {width: 40rpx; height: 40rpx;}

 

 

Js:

data: {

arr: [{

content: "我的老哥",

status: true

}, {

content: "我的老弟",

status: true

}, {

content: "我的老妹",

status: true

}, ]

},

statusClick: function(e) {

var arr = this.data.arr; //声明的数组

var index = e.currentTarget.dataset.index; //当前数组的索引下标

if (arr[index].status == true) { //如果当前数组下标的状态为true

arr[index].status = false; //将false赋给当前数组的下标

} else { //反之

arr[index].status = true;

}

 

this.setData({

arr: arr

})

},