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
})
},