微信小程序怎么自定义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部分：

    .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;    }

效果图：

以上就是关于“微信小程序怎么自定义tab实现多层tab嵌套”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。