效果图
Vant UI框架-Tabbar实现底部菜单
实现功能
- 自定义图标
- 路由改变时没有mounted，需要watch监控路由的改变，实现当前页面图标的高亮选中效果
- 直接地址栏输入指定页面地址时，实现当前页面图标的高亮选中效果
基础用法
<template>
<div id="app">
<van-tabbar v-model="active" active-color="#07c160">
<van-tabbar-item to="/">
<span>首页</span>
<img
slot="icon" slot-scope="props"
:src="props.active ? icon.active : icon.normal"
>
</van-tabbar-item>
<van-tabbar-item to="/cate">
<span>分类</span>
<img
slot="icon" slot-scope="props"
:src="props.active ? cate.active : cate.normal"
>
</van-tabbar-item>
<van-tabbar-item
to="/cart"
icon="shopping-cart" info="3">
购物车
</van-tabbar-item>
<van-tabbar-item
to="/mine"
icon="contact">
我的
</van-tabbar-item>
</van-tabbar>
<router-view/>
</div>
</template>
js部分
<script>
import { Tabbar,TabbarItem } from 'vant';
export default {
name: 'App',
components: {
[Tabbar.name]: Tabbar,
[TabbarItem.name]: TabbarItem
},
data() {
return {
active: 0,
tabbar:["","cate","cart","mine"],
icon: {
normal: require('./assets/my-1.png'),
active: require('./assets/my-7.png')
},
cate: {
normal: require('./assets/my-1.png'),
active: require('./assets/my-7.png')
}
}
},
mounted(){
this.tabbarActive();
},
watch: {
'$route' (to, from) {// 对路由变化作出响应
this.tabbarActive();
}
},
methods: {
tabbarActive(){
const href = window.location.href.split("#/")[1];
for(let i=0;i<4;i++){
if(href==this.tabbar[i]){
this.active=i;
}
}
},
},
}
</script>
