VantUI封裝自定義Tabbar路由跳轉(zhuǎn)的實(shí)現(xiàn)
本文主要介紹了VantUI封裝自定義Tabbar路由跳轉(zhuǎn)的實(shí)現(xiàn),分享給大家,具體如下:
在src目錄下新建個(gè)components文件夾來(lái)放自己定義的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: "首頁(yè)", 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: "學(xué)習(xí)", 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組件的頁(yè)面到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完整項(xiàng)目
https://github.com/skywalk94/vueWechatH5
到此這篇關(guān)于VantUI封裝自定義Tabbar路由跳轉(zhuǎn)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vant封裝Tabbar路由跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue+axios封裝請(qǐng)求實(shí)現(xiàn)前后端分離
這篇文章主要為大家詳細(xì)介紹了Vue+axios封裝請(qǐng)求實(shí)現(xiàn)前后端分離,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-10-10Vue數(shù)組中出現(xiàn)__ob__:Observer無(wú)法取值問(wèn)題的解決方法
__ob__: Observer這個(gè)屬性其實(shí)是Vue監(jiān)控變量產(chǎn)生的,下面這篇文章主要給大家介紹了關(guān)于Vue數(shù)組中出現(xiàn)__ob__:?Observer無(wú)法取值問(wèn)題的解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03解決$store.getters調(diào)用不執(zhí)行的問(wèn)題
今天小編就為大家分享一篇解決$store.getters調(diào)用不執(zhí)行的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11Vue.js基礎(chǔ)之監(jiān)聽子組件事件v-on及綁定數(shù)據(jù)v-model學(xué)習(xí)
這篇文章主要為大家介紹了Vue.js基礎(chǔ)之監(jiān)聽子組件事件v-on及綁定數(shù)據(jù)v-model學(xué)習(xí),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06vuex頁(yè)面刷新數(shù)據(jù)丟失解決方法詳解
這篇文章主要為大家介紹了vuex頁(yè)面刷新數(shù)據(jù)丟失解決方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07Vue屏幕自適應(yīng)三種實(shí)現(xiàn)方法詳解
在實(shí)際業(yè)務(wù)中,我們常用圖表來(lái)做數(shù)據(jù)統(tǒng)計(jì),數(shù)據(jù)展示,數(shù)據(jù)可視化等比較直觀的方式來(lái)達(dá)到一目了然的數(shù)據(jù)查看,但在大屏開發(fā)過(guò)程中,常會(huì)因?yàn)檫m配不同屏幕而感到困擾,下面我們來(lái)解決一下這個(gè)不算難題的難題2022-11-11