微信小程序自定義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;
}
效果圖：
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。