vue实现底部导航栏
Vue 实现底部导航栏的方法
使用 Vue Router 和固定定位
创建底部导航栏组件，结合 Vue Router 实现路由跳转，并通过 CSS 固定定位使其始终显示在底部。
<template>
<div class="tab-bar">
<router-link
v-for="(item, index) in tabs"
:key="index"
:to="item.path"
class="tab-item"
>
<span class="icon">{{ item.icon }}</span>
<span class="text">{{ item.text }}</span>
</router-link>
</div>
</template>
<script>
export default {
data() {
return {
tabs: [
{ path: '/home', icon: '🏠', text: '首页' },
{ path: '/category', icon: '📚', text: '分类' },
{ path: '/cart', icon: '🛒', text: '购物车' },
{ path: '/profile', icon: '👤', text: '我的' }
]
}
}
}
</script>
<style scoped>
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
background: #fff;
box-shadow: 0 -1px 10px rgba(0,0,0,0.1);
}
.tab-item {
flex: 1;
text-align: center;
padding: 8px 0;
color: #666;
text-decoration: none;
}
.tab-item.router-link-active {
color: #42b983;
}
.icon {
display: block;
font-size: 22px;
}
.text {
font-size: 12px;
}
</style>使用第三方 UI 库
许多 Vue UI 组件库提供了现成的底部导航栏组件，可以快速集成。
安装 Vant UI 库：
npm install vant使用 Vant 的 Tabbar 组件：
<template>
<van-tabbar v-model="active" fixed>
<van-tabbar-item icon="home-o">首页</van-tabbar-item>
<van-tabbar-item icon="search">搜索</van-tabbar-item>
<van-tabbar-item icon="cart-o">购物车</van-tabbar-item>
<van-tabbar-item icon="user-o">我的</van-tabbar-item>
</van-tabbar>
</template>
<script>
import { Tabbar, TabbarItem } from 'vant';
export default {
components: {
[Tabbar.name]: Tabbar,
[TabbarItem.name]: TabbarItem
},
data() {
return {
active: 0
}
}
}
</script>动态切换导航栏
根据路由变化自动高亮当前导航项，在 Vue Router 中设置路由元信息。
// router.js
const routes = [
{
path: '/home',
component: Home,
meta: { tabIndex: 0 }
},
{
path: '/category',
component: Category,
meta: { tabIndex: 1 }
}
]在导航栏组件中监听路由变化：
watch: {
'$route'(to) {
this.active = to.meta.tabIndex;
}
}添加过渡动画
为导航栏切换添加平滑的过渡效果。
<template>
<transition name="fade">
<div class="tab-bar" v-show="show">
<!-- 导航内容 -->
</div>
</transition>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>响应式设计
通过媒体查询调整导航栏在不同设备上的显示效果。
@media (max-width: 768px) {
.tab-item {
padding: 6px 0;
}
.icon {
font-size: 18px;
}
}这些方法可以根据项目需求灵活组合使用，实现功能完善且美观的底部导航栏。
