Vue自定义Tabbar
文章描述：
Vue自定义Tabbar以及选中效果
把Tabbar定义为插件，这样能简洁代码和方便操作
插件
1、根目录src/components/common新建Tabbar.vue
template
<template>
<div class="tabbar">
<ul>
<li v-for="(item,index) in routerList"
:key="index"
@click='switchTab(item.path)'>
<img :src="$route.path.includes(item.path) ? item.selected : item.active" />
<span :class="$route.path.includes(item.path) ? 'active' : '' ">{{item.title}}</span>
</li>
</ul>
</div>
</template>script
export default{
data(){
return{
routerList:[
{
title:'首页',
path:'/home',
active:'./images/home.png',
selected:'./images/home-active.png'
},
{
title:'分类',
path:'/list',
active:'./images/cate.png',
selected:'./images/cate-active.png'
},
{
title:'购物车',
path:'/cart',
active:'./images/cart.png',
selected:'./images/cart-active.png'
},
{
title:'我的',
path:'/my',
active:'./images/my.png',
selected:'./images/my-active.png'
}
]
}
},
methods:{
switchTab(path){
//console.log(path)
//判断是否点击同一个路由
if(this.$route.path == path) return;
this.$router.replace(path)
}
}
}style
.tabbar{
position: fixed;
left: 0;
bottom: 0;
z-index: 999;
width: 100%;
height: 2rem;
background-color: #fff;
}
.tabbar ul{
display: flex;
justify-content: space-around;
width: 100%;
height: 100%;
align-items: center;
}
.tabbar ul li{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.tabbar ul li img{
width: 0.826666rem;
height: 0.826666rem;
display: block;
margin: 0 auto;
}
.tabbar ul li span{
font-size: 0.426666rem;
}
.tabbar .active{
color: red;
}使用
template
<template>
<div class="home">
<Tabbar></Tabbar>
</div>
</template>
script
import Tabbar from '@/components/common/Tabbar.vue'
export default{
name:"Home",
components:{
Tabbar
}
}
发布时间：2022/07/12
发表评论