微信小程序——点击不同的标签，弹出显示不同的内容

先展示效果图：（点击下面的小标签，弹出相应的内容）

思路：先给List所以数据绑定isactive:false，再通过点击事件，点击哪个，就把哪个的isactive设置为true，再用三元表达式item.isActive?'':'hidden'判断为真为假给标签加上样式

wx.js

data: {
    subs:[
      {list:'包',imagesrc:"/icon/bag.png",classify:'可循环物',isActive:false},
      {list:'香蕉',imagesrc:"/icon/banana.png",classify:'厨余垃圾',isActive:false},
      {list:'鞭炮',imagesrc:"/icon/banger.png",classify:'有害垃圾',isActive:false},
      {list:'废弃电池',imagesrc:"/icon/battery.png",classify:'有害垃圾',isActive:false},
      {list:'冰淇淋',imagesrc:"/icon/ice.png",classify:'厨余垃圾',isActive:false},
      {list:'帽子',imagesrc:"/icon/hate.png",classify:'可循环物',isActive:false},
      {list:'废弃药品',imagesrc:"/icon/drug.png",classify:'有害垃圾',isActive:false},
      {list:'杯子',imagesrc:"/icon/cup.png",classify:'其他垃圾',isActive:false},
      {list:'樱桃',imagesrc:"/icon/cherry.png",classify:'厨余垃圾',isActive:false},
      {list:'废弃灯泡',imagesrc:"/icon/light.png",classify:'有害垃圾',isActive:false},
      {list:'染发膏',imagesrc:"/icon/hair.png",classify:'有害垃圾',isActive:false},
      {list:'杀虫剂',imagesrc:"/icon/pesticide.png",classify:'有害垃圾',isActive:false},
      {list:'薯条',imagesrc:"/icon/chips.png",classify:'厨余垃圾',isActive:false},
      {list:'热狗',imagesrc:"/icon/hotdog.png",classify:'厨余垃圾',isActive:false},
      {list:'瓷碗',imagesrc:"/icon/bowl.png",classify:'其他垃圾',isActive:false},
      {list:'冰棒',imagesrc:"/icon/Popsicle.png",classify:'厨余垃圾',isActive:false},
    ],
    kindList:[],
    showModal: false,
 
  },
  sub:function(e){
    const {index} = e.currentTarget.dataset;
    let {kindList} = this.data;//kindList是新修改后的
    kindList.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
    this.setData({
      showModal: true,
      subs:kindList,
    })
  },
  close2() {
    this.setData({
      showModal: false
    })
  },
  onLoad: function (options) {
    this.setData({
        kindList: this.data.subs
      })
  },

wxml

<view class="serach">
  热门搜索
</view>
  
<view class="sub" wx:for="{{subs}}" wx:key="{{item.id}}">
    <view class="tips" bindtap="sub" data-item="{{item}}" data-index="{{index}}"><span>{{item.list}}</span></view>
</view>

<!--遮罩层-->
<view>
<view class="mask" bindtap="close2" wx:if="{{ showModal }}"></view>
<view class="modal" wx:if="{{ showModal }}">
<button size="mini" class="btn2" bindtap="close2">×</button>
  <view wx:for="{{subs}}" wx:key="{{item.id}}" >
    <view class="head {{item.isActive?'':'hidden'}}">
    <image src="{{item.imagesrc}}"/>
    <span class="header">{{item.list}}</span>
    <span class="text">{{item.classify}}</span>
    </view>
  </view>
</view>
</view>

wxss

.sub{
    margin-top:30rpx;
}
.tips{
    float:left;
    margin-left:25rpx;
    margin-top:15rpx;
}
.tips span{
    background-color: white;
    border-radius: 25rpx;
    display:inline-block;
    line-height:60rpx;
    color:black;
    border: 1px solid rgb(180, 176, 176);
    
}


.mask{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background:rgba(0,0,0,.8);
    z-index: 99999;
  }
  .modal{
    width: 80%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 999999;
    background-color: white;
    border-radius: 30rpx;
  }
  .btn2{
    border-radius:50%;
    width:50rpx;
    height:50rpx;
    color:pink;
    float:right;
    background-color: rgba(255, 255, 255, 0.712);
  }
  .head{
    font-size: 33rpx;
    color: #172238;
    font-weight: bold;
    display: flex;
    align-items: center;
    padding: 20rpx;  
    border-bottom: 1rpx solid #e1e5e9;
   
  }
  .hidden{
    display:none;
  }
.head image{
  width: 100rpx;
  height:100rpx;
  margin-left:0px;
}
.head .header{
  justify-content: center;
  left:35%;
  position:absolute;
}
.head .text{
  background-color: #3CB371;
  border-radius: 20rpx;
  position:absolute;
  height:50rpx;
  right:100rpx;
}