微信小程序怎么自定義tab實現多層tab嵌套

這篇“微信小程序怎么自定義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嵌套”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。