js
faceList:[
{
"lximage": "../../images/l_xin.png",
"id": 0
},
{
"lximage": "../../images/l_fang.png",
"id": 1
},
{
"lximage": "../../images/l_sanjiao.png",
"id": 2
},
{
"lximage": "../../images/l_yuan.png",
"id": 3
},
{
"lximage": "../../images/l_li.png",
"id": 4
},
{
"lximage": "../../images/l_tuoyuan.png",
"id": 5
}],
isFaceChecked: 0,
},
facehandler(e){
var id = e.currentTarget.id;
console.log(id)
this.setData({
isFaceChecked: id,
})
},
wxml
<block wx:for="{{faceList}}" wx:key="aa">
<view id='{{item.id}}' class='{{item.id == isFaceChecked ? "choiceFace" : ""}} facehandler' bindtap="facehandler">
<image class='fbimg' src='{{item.lximage}}' ></image>
</view>
</block>
css
.facehandler{
border: 1rpx solid #d7d7d7;
width: 140rpx;
height: 140rpx;
border-radius: 15rpx;
margin-left: 10rpx;
margin-right: 10rpx;
float: left;
margin-top: 20rpx;
}
.choiceFace{
background-color: #eeeeee
}
效果