|
看了好几个网友的代码，真是坑啊。还是自己好好研究，才是王道。
直接参考官网的代码就好了https://vant-contrib.gitee.io/vant/#/zh-CN/tabbar#zi-ding-yi-tu-biao，具体属性，再参考API进行自定义配置。
Tabbar Props
active-color选中标签的颜色string
TabbarItem Slots
名称说明参数icon自定义图标active: 是否为选中标签
代码中props.active 表示该tab，是否被选中
{{item.title}}
![]()
export default {
name: "indexTab",
data() {
return {
active: 0, //默认选中tab
tabbars:[
{
name: "/home",
title: "首页",
normal: require("@/assets/imgs/bar_home.png"),
active: require("@/assets/imgs/bar_home1.png")
},
{
name: "/square",
title: "分享广场",
normal: require("@/assets/imgs/bar_square.png"),
active: require("@/assets/imgs/bar_square1.png")
},
{
name: "/user",
title: "我的",
normal: require("@/assets/imgs/bar_user.png"),
active: require("@/assets/imgs/bar_user1.png")
},
]
};
},
mounted() {
// 如有缓存，刷新页面时还进入该页面
let index = sessionStorage.getItem('tabIndex')
if(index){
this.tabIndex(index)
}
},
methods: {
tabIndex(index) {
index = Number(index)
this.active = index;
// 记录当前tab页
sessionStorage.setItem('tabIndex',index)
let val = this.tabbars[index].name
this.$router.push(val);
},
},
};
效果图：
 
|