微信小程序循环数组展示数据点击当前改变当前按钮状态
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
})
},
