微信小程序自定义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嵌套的详细内容...