本篇内容介绍了“VantUI怎么封装自定义Tabbar路由跳转”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!效果如下:在src目录下新建个c
本篇内容介绍了“VantUI怎么封装自定义Tabbar路由跳转”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
效果如下:
在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", }, ], }; }, //监听路由变化 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>
“VantUI怎么封装自定义Tabbar路由跳转”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!
--结束END--
本文标题: VantUI怎么封装自定义Tabbar路由跳转
本文链接: https://www.lsjlt.com/news/329666.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0