快捷導(dǎo)航

微信小程序自定義tab實(shí)現(xiàn)多層tab嵌套

更新時(shí)間：2022年07月17日 08:53:38 作者：賣服務(wù)器-小天

這篇文章主要為大家詳細(xì)介紹了微信小程序自定義tab實(shí)現(xiàn)多層tab嵌套，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序自定義tab實(shí)現(xiàn)多層tab嵌套的具體代碼，供大家參考，具體內(nèi)容如下

僅供參考，剛學(xué)，不對(duì)的地方希望交流學(xué)習(xí)

HTML：

<template>
?? ? <view class="">
?? ? ?? ?<view class="end-title">
?? ? ?? ?　　<p @tap="change(0)" :class="{btn:btnnum == 0}">服務(wù)</p>
?? ? ?? ?　　<p @tap="change(1)" :class="{btn:btnnum == 1}">評(píng)價(jià)</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}">保養(yǎng)</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}">
?? ??? ??? ? 　　保養(yǎng)
?? ??? ??? ?</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}">
?? ??? ??? ?評(píng)論
?? ? ?? ?</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部分：

/* 將三個(gè)內(nèi)容view的display設(shè)置為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;
? ? }

效果圖：