VantUI封裝自定義Tabbar路由跳轉的實現(xiàn)
更新時間:2022年05月18日 15:57:32 作者:明知山_
本文主要介紹了VantUI封裝自定義Tabbar路由跳轉的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
本文主要介紹了VantUI封裝自定義Tabbar路由跳轉的實現(xiàn),分享給大家,具體如下:

在src目錄下新建個components文件夾來放自己定義的tabbar組件
<template>
<div
v-if="
$route.name == 'index' ||
$route.name == 'learn' ||
$route.name == 'person'
"
>
<van-tabbar v-model="active" inactive-color="#666666" active-color="#000000" fixed placeholder>
<van-tabbar-item replace v-for="(item, index) in tabbarList" :key="index" :to="item.path">
<span>{{ item.title }}</span>
<img slot="icon" slot-scope="props" :src="props.active ? item.active : item.normal" />
</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script>
export default {
name: "tabbar",
data() {
return {
active: 0,
tabbarList: [
{
path: "/",
title: "首頁",
normal:
"https://sucai.suoluomei.cn/sucai_zs/images/20190910093117-fx2.png",
active:
"https://sucai.suoluomei.cn/sucai_zs/images/20190910093117-fx.png",
},
{
path: "/learn",
title: "學習",
normal:
"https://sucai.suoluomei.cn/sucai_zs/images/20190910093117-xx.png",
active:
"https://sucai.suoluomei.cn/sucai_zs/images/20190910093117-xx2.png",
},
{
path: "/person",
title: "我的",
normal:
"https://sucai.suoluomei.cn/sucai_zs/images/20190910093117-wd.png",
active:
"https://sucai.suoluomei.cn/sucai_zs/images/20190910093117-wd2.png",
},
],
};
},
//監(jiān)聽路由變化
watch: {
$route(to) {
this.activeTab(to.path);
},
},
methods: {
activeTab(path) {
var index = this.tabbarList.map((item) => item.path).indexOf(path);
if (index != -1) {
this.active = index;
}
},
},
};
</script>
引入tabbar組件的頁面到app.vue
<template>
<div id="app">
<router-view />
<tabbar></tabbar>
</div>
</template>
<script>
import tabbar from "./components/tabbar.vue"; //引用組件的地址
export default {
components: {
tabbar
},
name: "App",
data() {
return {};
},
methods: {},
};
</script>
github完整項目
https://github.com/skywalk94/vueWechatH5
到此這篇關于VantUI封裝自定義Tabbar路由跳轉的實現(xiàn)的文章就介紹到這了,更多相關Vant封裝Tabbar路由跳轉內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue數組中出現(xiàn)__ob__:Observer無法取值問題的解決方法
__ob__: Observer這個屬性其實是Vue監(jiān)控變量產生的,下面這篇文章主要給大家介紹了關于Vue數組中出現(xiàn)__ob__:?Observer無法取值問題的解決方法,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
Vue.js基礎之監(jiān)聽子組件事件v-on及綁定數據v-model學習
這篇文章主要為大家介紹了Vue.js基礎之監(jiān)聽子組件事件v-on及綁定數據v-model學習,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06

