vue项目使用tabbar

最新推荐文章于 2023-05-26 21:27:18 发布

qq_32496215

最新推荐文章于 2023-05-26 21:27:18 发布

阅读量407

点赞数 1

本文链接：https://blog.csdn.net/qq_32496215/article/details/104658057

版权

在这里插入图片描述

代码:

<van-tabbar v-model="tabIndex" router border fixed z-index="10" active-color="#42B0ED" inactive-color="#2A2A2A">
        <van-tabbar-item replace :to="item.path" v-for="(item,index) in tabbarList" :key="index">
            <span>{{item.name}}</span>
            <img :src="tabIndex === index?item.active:item.normal" alt="" slot="icon">
        </van-tabbar-item>
    </van-tabbar>

 tabIndex:0,
                tabbarList:[
                    {
                        name:'首页',
                        path:'/index',
                        normal:require('@/assets/images/tabbar/index.png'),
                        active:require('@/assets/images/tabbar/index_color.png')
                    },
                    {
                        name:'消息',
                        path:'/message',
                        normal:require('@/assets/images/tabbar/message.png'),
                        active:require('@/assets/images/tabbar/message_color.png')
                    },
                    {
                        name:'工作',
                        path:'/work',
                        normal:require('@/assets/images/tabbar/work.png'),
                        active:require('@/assets/images/tabbar/work_color.png')
                    },
                    {
                        name:'我的',
                        path:'/profile',
                        normal:require('@/assets/images/tabbar/mine.png'),
                        active:require('@/assets/images/tabbar/mine_color.png')
                    },
                ]