Tab制作導(dǎo)航頁面同眯，分類信息導(dǎo)航
最終效果為：
GIF2222.gif
1:首先需要引入相關(guān)的組件
image.png
2:設(shè)置相關(guān)導(dǎo)航標題
image.png
3：使用組件
<!-- 標簽區(qū)域 -->
<van-row>
<van-col span="24">
<van-tabs @click="onClick" sticky title-active-color="#E32DAB" color="#E32DAB" :line-width="100" :line-height="2">
<van-tab v-model="active" v-for="index in 7" :title="title[index]" :key="index.id" class="tab">
內(nèi)容 {{ index }}
</van-tab>
</van-tabs>
</van-col>
</van-row>
PS：使用組件過程中遇到的問題就是按官網(wǎng)的標題文檔設(shè)置對應(yīng)的Number類型的屬性的時候報錯，錯誤信息為：
Vue warn]: Invalid prop: type check failed for prop "lineWidth". Expected Number with value 100, got String with value "100".
解決問題點主要方式是需要再屬性的簽名加上'：'
即Number類型的屬性
line-width="100"
改為
:line-width="100"
onClick是點擊屬性:
image.png
image.png
