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

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

思路：先给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;
}

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

微信小程序第五篇：页面弹出效果及共享元素动画
系列文章传送门: 微信小程序第一篇:自定义组件详解微信小程序第二篇:七种主流通信方法详解微信小程序第三篇:获取页面节点信息微信小程序第四篇:生成图片并保存到手机相册目录一.page-caon ...
微信小程序点击button按钮后重置输入框等表单内容
效果如图 wxml如下图在js文件中设置 /*** 重置条件*/resetSalaryBtnClick: function (e) {this.setData({minben: "&quo ...
微信小程序点击放大图片
微信小程序点击放大图片在做微信小程序的时候遇到了这个点击放大的事件,这里记录一下 checkmap:function(e){var imageurl=this.data.mapimagesrc;co ...
微信小程序控制盒子显示隐藏_微信小程序点击控制元素的显示与隐藏
微信小程序点击控制元素的显示与隐藏首先我们先来看一下单个点击效果我们来看一下wxml中的代码: 更多内容更多> 2017-07-27 下面的是js中的主要代码: data: { shows ...
微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
wxss 点击样式_微信小程序点击控件修改样式实例详解
微信小程序点击控件修改样式实例详解现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它. ...
微信小程序点击更改样式-点击获得下划线
微信小程序点击更改样式-点击获得下划线 <view class="container"> <scroll-view class='headerBox' scrol ...
微信小程序点击弹出输入框
微信小程序点击弹出输入框第一次写博客,我决定不要太old school. let's get it!最近在学习微信开发,刚接触到微信小程序,自己尝试着做了一个简单的小程序,过程中发现类似web开发中 ...
微信小程序点击tab栏切换，点击切换某个tab滚动到中间（ uniapp ）
微信小程序点击tab栏切换,点击某个tab滚动到中间( uniapp ) 之前写过原生js的tab栏滚动到中间,正好最近有个uniapp小程序项目中要用到tab切换滚动, 写个demo发出来 + 注意 ...

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

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

最新文章

热门文章