|
1 問題描述 制作Tab標(biāo)簽導(dǎo)航欄中的菜單鍵（三個(gè)點(diǎn)/三條橫線），需要將它固定在頂部導(dǎo)航欄的右側(cè)（或左側(cè)）。那么如何固定菜單鍵呢？ 2 算法描述 在使用圖標(biāo)并固定在標(biāo)簽欄右側(cè)需要通過(guò)<template #nav-right></template>標(biāo)簽進(jìn)行樣式的標(biāo)簽欄右側(cè)固定，而需要在頂部導(dǎo)航欄右側(cè)進(jìn)行固定則需style樣式設(shè)定。 代碼清單 1 <van-tabs class="menu-tabs" v-model="activeName" @click="tagClick">
<van-tab title="導(dǎo)覽" name="guide" >a</van-tab>
<van-tab title="出入口" name="entranceandexit">b</van-tab>
<van-tab title="教學(xué)樓" name="academicBuilding">c</van-tab>
<template #nav-right>
<i class="placeholder"></i>
<van-icon name="wap-nav" class="fixedly-btn-right" @click="Menushow=true"></van-icon>
</template>
</van-tabs> |
style樣式 代碼清單 2 /* 菜單鍵 */
.fixedly-btn-right{
/* 固定位置*/
position: fixed;
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 66px;
height: 45px;
background-color: #FFFFFF;
/* 透明度*/
opacity: 0.9;
/* 圖標(biāo)大小*/
font-size: 23px;
}
/* 占位符 (將導(dǎo)航欄最后一項(xiàng)顯現(xiàn)出來(lái))*/
.placeholder{
flex-shrink: 0;
width: 66px;
height: 45px;
} |
效果樣式： 
3 結(jié)語(yǔ) 本篇文章主要講的是vant的菜單鍵的固定。在固定菜單鍵時(shí)遇到了許多不會(huì)的問題，但通過(guò)某些渠道的相似做法，我們可以牽引到不同案例中，將不同的需求結(jié)合一起，這樣就能解決問題。 實(shí)習(xí)編輯：王曉姣 稿件來(lái)源：深度學(xué)習(xí)與文旅應(yīng)用實(shí)驗(yàn)室（DLETA） |
