您好,登錄后才能下訂單哦!
這篇“微信小程序怎么自定義tab實現(xiàn)多層tab嵌套”文章的知識點大部分人都不太理解,所以小編給大家總結了以下內(nèi)容,內(nèi)容詳細,步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“微信小程序怎么自定義tab實現(xiàn)多層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}">保養(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}"> 評論 </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部分:
/* 將三個內(nèi)容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實現(xiàn)多層tab嵌套”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對大家有幫助,若想了解更多相關的知識內(nèi)容,請關注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。