微信小程序自定义tab实现多层tab嵌套
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了微信小程序自定义tab实现多层tab嵌套的具体代码，供大家参考，具体内容如下
仅供参考，刚学，不对的地方希望交流学习
HTML：
<template>
<view class="">
<view class="end-title">
<p @tap="change(0)" :class="{btn:btnnum == 0}">服务</p>
<p @tap="change(1)" :class="{btn:btnnum == 1}">评价</p>
</view>
<view class="end-cont" :class="{dis:btnnum == 0}">
<view class="end-title">
<view @tap="change1(0)" :class="{btna:bu == 0} " >洗车</view>
<view @tap="change1(1)" :class="{btna:bu == 1}">保养</view>
<view @tap="change1(2)" :class="{btna:bu == 2}">轮胎</view>
<view @tap="change1(3)" :class="{btna:bu == 3}">安装</view>
</view>
<view class="end-cont" :class="{dis:bu == 0}">
洗车
</view>
<view class="end-cont" :class="{dis:bu == 1}">
保养
</view>
<view class="end-cont" :class="{dis:bu == 2}">
轮胎
</view>
<view class="end-cont" :class="{dis:bu == 3}">
安装
</view>
</view>
<view class="end-cont" :class="{dis:btnnum == 1}">
评论
</view>
</view>
</template>js部分
export default {
data(){`在这里插入代码片`
return{
btnnum: 0,
bu:0
}
},
methods: {
change(e) {
this.btnnum = e
console.log(this.btnnum)
},
change1(e){
this.bu=e
console.log(this.bu)
}
}
}css部分：
.end-title{
display: flex;
}
.end-title p{
flex-grow: 1;
text-align: center;
}
.end-title view{
flex-grow: 1;
text-align: center;
background-color: #6666660d;
width: 20%;
margin:0 20rpx ;
border-radius: 20rpx;
}
.end-cont{
margin: 0 10rpx;
display: none;
background:#fff;
border-radius: 5px;
}
.btn{
color: red;
}
.btna{
color: red;
background: #e8dcdb;
}
.dis{
display: block;
}效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
