VANT標簽欄樣式改變

1 問題描述

在使用vant的Tab標簽制作導航欄時，Tab樣式書寫方式同css有些許不同，並且一些樣式變量是已經自定義的。那么如何改變樣式呢？為此總結了一部分較為常用的樣式的代碼。

2 算法描述

   在對Tab標簽的樣式進行改變時，不僅要寫類標簽名（class），還要寫上vant-tab的所需要部分的名。或者某些自定義樣式可通過vant教程里的主題定制教程進行樣式的改變。本章節采用前一方式改變樣式。例子如下：

1）默認模式（line樣式）

代碼清單 1

<van-tabs class="menu-tabs" v-model="activeName" @click="tagClick" >
           <van-tab title="導覽" name="guide" ></van-tab>
           <van-tab title="出入口" name="entranceandexit"></van-tab>
           <van-tab title="教學樓" name="academicBuilding"></van-tab>
         </van-tabs>

效果如下：

默認的樣式：

2）若要在點擊標簽時改變標簽的樣式需要在類標簽名后添上 .van-tab--active。

代碼清單 2

<style >
/* 標簽欄樣式 */
.menu-tabs .van-tab--active{
 color: #FFFFFF; /* 字體顏色 */
 background-color: #FF8917;/* 標簽背景顏色 */
 border-radius: 40px;/* 圓角標簽背景 */
}
</style >

還可通過 width，height改變背景的寬和高。

效果如下：

3）若要改變標簽底部線條的樣式需要在類標簽名后添上 .van-tabs__line。

代碼清單 3

<style >
.menu-tabs .van-tabs__line{
 background-color: #ff55ff;/* 線條顏色 */
 width: 40px;/*寬度 */
 height: 10px;/* 高度 */
border-radius: 40px;/* 圓角 */
}
</style >

效果如下：

4)card樣式，在van-tabs使用type。

代碼清單 4

<van-tabs class="menu-tabs" type="card" v-model="activeName" @click="tagClick" >
           <van-tab title="導覽" name="guide" ></van-tab>
           <van-tab title="出入口" name="entranceandexit"></van-tab>
           <van-tab title="教學樓" name="academicBuilding"></van-tab>
</van-tabs>

效果如下：

3 結語

本篇文章主要講的是vant的Tab標簽樣式的改變。在遇到不會可以運行到瀏覽器中使用檢查工具進行調試，再加上通過教程學習進行問題的解決。

實習編輯：李欣容

稿件來源：深度學習與文旅應用實驗室（DLETA）