这篇“微信小程序怎么自定义tab实现多层tab嵌套”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“微信小程序怎么自定义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部分：
/* 将三个内容view的display设置为none(隐藏) */
.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: 1px solid ; */
/* background-color: #999999; */
border-radius: 5px;
}
.btn{
color: red;
}
.btna{
color: red;
background: #e8dcdb;
}
.dis{
display: block;
}效果图：
以上就是关于“微信小程序怎么自定义tab实现多层tab嵌套”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
