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

不念不忘少年蓝@ 2023-05-21 13:59 23阅读 0赞

首先放一下我的效果图：

![显示对应图标效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5NTIwMw_size_16_color_FFFFFF_t_70]

我这里是用的静态数据放到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中引用。

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5NTIwMw_size_16_color_FFFFFF_t_70]: /images/20230521/4a170884a4f245a1a561acd5cd085b71.png