先展示效果图:(点击下面的小标签,弹出相应的内容)
思路:先给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;
}