vue实现底部导航栏
实现底部导航栏的基本结构
在Vue中实现底部导航栏通常使用<router-link>结合Vue Router进行路由切换。基本结构包含固定定位的底部容器和导航项：
<template>
<div class="footer-nav">
<router-link to="/home" class="nav-item">
<i class="icon-home"></i>
<span>首页</span>
</router-link>
<router-link to="/category" class="nav-item">
<i class="icon-category"></i>
<span>分类</span>
</router-link>
<router-link to="/cart" class="nav-item">
<i class="icon-cart"></i>
<span>购物车</span>
</router-link>
<router-link to="/user" class="nav-item">
<i class="icon-user"></i>
<span>我的</span>
</router-link>
</div>
</template>样式设置
通过CSS固定定位到底部，并设置flex布局均匀分布导航项：
<style scoped>
.footer-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
display: flex;
background: white;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
z-index: 100;
}
.nav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #666;
text-decoration: none;
}
.router-link-active {
color: #ff6700;
}
</style>动态高亮当前路由
通过Vue Router的router-link-active类自动匹配当前路由，或使用v-slot实现更复杂的高亮逻辑：
<router-link
v-for="item in navItems"
:key="item.path"
:to="item.path"
v-slot="{ isActive }"
>
<div :class="['nav-item', isActive ? 'active' : '']">
<i :class="item.icon"></i>
<span>{{ item.name }}</span>
</div>
</router-link>数据驱动配置
将导航项配置为响应式数据，便于维护和扩展：
<script>
export default {
data() {
return {
navItems: [
{ path: '/home', name: '首页', icon: 'icon-home' },
{ path: '/category', name: '分类', icon: 'icon-category' },
{ path: '/cart', name: '购物车', icon: 'icon-cart' },
{ path: '/user', name: '我的', icon: 'icon-user' }
]
}
}
}
</script>移动端适配
添加viewport适配和防止点击延迟的meta标签：
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">图标方案选择
推荐使用iconfont或SVG图标：
- 引入iconfont：
<link rel="stylesheet" href="//at.alicdn.com/t/font_1234567_xxx.css"> - 使用SVG：
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-home"></use> </svg>
