Vant的Tabbar標簽欄引入自定義圖標方式
更新時間：2022年04月28日 08:41:12 作者：小白靜
這篇文章主要介紹了Vant的Tabbar標簽欄引入自定義圖標方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Tabbar標簽欄引入自定義圖標
**使用*van-tabbar*組件**
*v-model*綁定的是對應的Tabbar下標*active-color*是未選中的文字顏色*inactive-color*是已選中的文字顏色**route**這個要特別注意，我就是在這踩了坑，我沒有加這個參數(shù)，但是能正常跳轉路由，但是圖標選中會出現(xiàn)問題，每次都需要雙擊。一直以為是插槽的問題，后面才發(fā)現(xiàn)官方api的這個參數(shù)
*van-tabbar-item*每一個Tab標簽 #icons ?自定義圖標的插槽 props.active ? 插槽的值，點擊后為true，初始為false
<van-tabbar v-model="active" active-color="#42A46F" inactive-color="#999999" @change="onChange" route>
<van-tabbar-item to="/myorder">
?? ??? ??? ??? ?<span>我的預約</span>
?? ??? ??? ??? ?<template #icon="props">
?? ??? ??? ??? ??? ?<van-image :src="props.active ? require('@mobile/assets/images/index/aftericon1.png') : require('@mobile/assets/images/index/icon1.png')" />
?? ??? ??? ??? ?</template>
?? ??? ??? ?</van-tabbar-item>
</van-tabbar>vant自義定Tabbar圖標和顏色
1.index代碼：
<template> ? <div class="app-container"> ? ? <div class="layout-content"> ? ? ? <keep-alive> ? ? ? ? <router-view v-if="$route.meta.keepAlive" style="margin-bottom: 50px"/> ? ? ? </keep-alive> ? ? ? <router-view v-if="!$route.meta.keepAlive" style=" margin-bottom: 50px"/> ? ? </div> ? ? <!-- ? ?底部導航組件 ? --> ? ? <div class="layout-footer"> ? ? ? <TabBar :data="tabbars" @change="handleChange"/> ? ? </div> ? </div> </template>
<script>
import TabBar from '@/components/TabBar'
export default {
? name: 'Home',
? computed: {
? ? key() {
? ? ? return this.$route.path
? ? }
? },
? data() {
? ? return {
? ? ? pic: '@src/assets/images/home-black.png',
? ? ? cachedViews: 'Home',
? ? ? tabbars: [
? ? ? ? {
? ? ? ? ? title: '首頁',
? ? ? ? ? to: {
? ? ? ? ? ? name: 'Home'
? ? ? ? ? },
? ? ? ? ? normal: require("../../src/assets/images/home_black.png"),
? ? ? ? ? active: require("../../src/assets/images/home_selected.png")
? ? ? ? },
? ? ? ? {
? ? ? ? ? title: '模塊',
? ? ? ? ? to: {
? ? ? ? ? ? name: 'Model'
? ? ? ? ? },
? ? ? ? ? normal: require("../../src/assets/images/model_black.png"),
? ? ? ? ? active: require("../../src/assets/images/model_selected.png")
? ? ? ? },
? ? ? ? {
? ? ? ? ? title: '關于我',
? ? ? ? ? to: {
? ? ? ? ? ? name: 'Mine'
? ? ? ? ? },
? ? ? ? ? normal: require("../../src/assets/images/mine_black.png"),
? ? ? ? ? active: require("../../src/assets/images/mine_selected.png")
? ? ? ? }
? ? ? ]
? ? }
? },
? components: {
? ? TabBar
? },
? methods: {
? ? handleChange(v) {
? ? ? console.log('tab value:', v)
? ? }
? }
}
</script>2.TabBar組件代碼
<template>
? <div>
? ? <van-tabbar fixed route v-model="active" @change="handleChange">
? ? ? <van-tabbar-item v-for="(item, index) in data" :to="item.to" :icon="item.icon" :key="index">
? ? ? ? <span :class="defaultActive === index ? active:''">{{ item.title }}</span>
? ? ? ? <template slot="icon" slot-scope="props">
? ? ? ? ? <img :src="props.active ? item.active : item.normal">
? ? ? ? </template>
? ? ? </van-tabbar-item>
? ? </van-tabbar>
? </div>
</template><script>
export default {
? name: 'TabBar',
? props: {
? ? defaultActive: {
? ? ? type: Number,
? ? ? default: 0
? ? },
? ? data: {
? ? ? type: Array,
? ? ? default: () => {
? ? ? ? return []
? ? ? }
? ? }
? },
? data() {
? ? return {
? ? ? active: this.defaultActive
? ? }
? },
? methods: {
? ? handleChange(value) {
? ? ? this.$emit('change', value)
? ? }
? }
}
</script><style scoped>
.active_tab img {
? width: 26px;
? height: 26px;
}
/* 自定義選中的顏色 */
.van-tabbar-item--active {
? color: #d81e06;
}
</style>3.運行效果圖
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue自定義switch開關組件,實現(xiàn)樣式可自行更改
今天小編就為大家分享一篇vue自定義switch開關組件,實現(xiàn)樣式可自行更改，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11 
這篇文章主要介紹了vue?css?相對路徑導入問題級踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06 
這篇文章主要給大家介紹了關于多個vue子路由文件自動化合并的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-09-09 
這篇文章主要介紹了vue2結合echarts實現(xiàn)一個地圖的效果,本文通過實例代碼給大家介紹的非常詳細,對大家何用vue和echarts實現(xiàn)一個地圖有一定的幫助,感興趣的朋友一起看看吧
2024-03-03 
Vue?Mock.js介紹和使用與首頁導航欄左側菜單搭建過程
Mock.js是一個模擬數(shù)據(jù)的生成器，用來幫助前端調試開發(fā)、進行前后端的原型分離以及用來提高自動化測試效率，這篇文章主要介紹了Vue?Mock.js介紹和使用與首頁導航欄左側菜單搭建,需要的朋友可以參考下
2023-09-09 
本文主要介紹了Vue實現(xiàn)前后端完全分離的項目實戰(zhàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-08-08 
vue項目中在外部js文件中直接調用vue實例的方法比如說this
這篇文章主要介紹了vue項目中在外部js文件中直接調用vue實例的方法比如說this,需要的朋友可以參考下
2019-04-04 
vue3利用v-model實現(xiàn)父子組件之間數(shù)據(jù)同步的代碼詳解
在Vue 3中,v-model這一指令也得到了升級,使得父子組件之間的數(shù)據(jù)同步變得更加容易和靈活,本文將探討一下Vue 3中如何利用v-model來實現(xiàn)父子組件之間的數(shù)據(jù)同步,需要的朋友可以參考下
2024-03-03 
這篇文章主要以vue3+vite+ts舉例,為大家詳細介紹了vue3中pinia的安裝與使用,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2023-09-09