博客

看了好几个网友的代码，真是坑啊。还是自己好好研究，才是王道。

直接参考官网的代码就好了

https://vant-contrib.gitee.io/vant/#/zh-CN/tabbar#zi-ding-yi-tu-biao

，具体属性，再参考API进行自定义配置。

Tabbar Props

TabbarItem Slots

代码中props.active 表示该tab，是否被选中

<template>
        <van-tabbar v-model="active" active-color="#ff4c7f">
            <van-tabbar-item :to="(item.name)" @click="tabIndex(index)" v-for="(item,index) in tabbars" :key="'tabbar' + index">
                    <span>{{item.title}}</span>
                  <template #icon="props">
                    <img :src="props.active ? item.active : item.normal" />
                  </template>
            </van-tabbar-item>
        </van-tabbar>
</template>

<script>
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);
        },
    },
};
</script>

效果图：