微信小程序点击显示或隐藏对应的图标

首先放一下我的效果图：

我这里是用的静态数据放到data中，在前台页面进行循环显示，接下来就直接放代码了。

index.wxml

<view class="page">
	<view class="page-hd"></view>
	<view class="page_bd">
		<block wx:for="{{banji}}" wx:key="{{item.id}}" wx:for-item="row">
			<view class="row">
				<mp-cell class="data item" data-id="{{row.classid}}" bindtap="row_tap">
					<view class="classname">{{row.classname}}</view>
					<view slot="footer">{{row.createtime}}</view>
				</mp-cell>
				<view class="btnArea footer" wx:if="{{row.classid == current}}">
					<image bindtap="student" src="/images/student.png"></image>
					<image bindtap="delete" src="/images/delete.png"></image>
					<image bindtap="guidang" src="/images/guidang.png"></image>
				</view>
			</view>
		</block>
	</view>
</view>

index.wxss

.page-hd{
  width: 100%;
  height: 50px;
  background: #09bb07;
  position: relative;
}
.weui-cell{
  width: 100%;
}
.data{
  display: flex;
  justify-content: space-between;
}
.btnArea{
  float: right;
  margin-right:15px ;
}
.row::after{
  content: '';
  display: block;
  clear: both;
}
.btnArea image{
  width: 20px;
  height: 20px;
  margin-left: 20px;
}

index.js

Page({
  data: {
    banji: [{
      'classid': 1,
      'classname': '18级php班',
      'state': 0,
      'createtime': '2020-4-8'
    },
    {
      'classid': 2,
      'classname': '18级JAVA班',
      'state': 0,
      'createtime': '2020-4-7'
    },
    {
      'classid': 3,
      'classname': '18级VR班',
      'state': 0,
      'createtime': '2020-4-9'
    }],
  },
  row_tap: function (e) {
    console.log(e)
    var id=e.currentTarget.dataset.id

    if(this.data.current !==id){
      this.setData({
        current:id
      })
    }else{
      this.setData({
        current:false
      })
    }
  },
})

index.json

{
  "usingComponents": {
    "mp-cells": "/weui/cells/cells",
    "mp-cell": "/weui/cell/cell"
  }
}

我的页面使用了weui组件中的cell和cells，所以要在json中引用。

以上就是如何点击显示或隐藏对应的图标的所有代码了。。