微信小程序九宫格实现点击选中

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
}

效果