vue实现天猫导航
Vue实现天猫导航
数据准备
天猫导航通常包含多个分类，每个分类下又有子分类。可以使用嵌套数组或对象来存储导航数据。例如：
data() {
return {
categories: [
{
name: '女装',
subCategories: ['连衣裙', 'T恤', '衬衫']
},
{
name: '男装',
subCategories: ['牛仔裤', '夹克', '卫衣']
}
]
}
}模板结构
使用Vue的模板语法构建导航结构。外层使用v-for循环渲染一级分类，内层再循环渲染子分类。
<div class="nav-container">
<div
v-for="category in categories"
:key="category.name"
class="category-item"
>
<div class="main-category">{{ category.name }}</div>
<div class="sub-category-container">
<div
v-for="sub in category.subCategories"
:key="sub"
class="sub-category"
>
{{ sub }}
</div>
</div>
</div>
</div>样式设计
天猫导航通常有悬停效果，当鼠标悬停在主分类上时显示子分类。使用CSS实现这种交互效果。
.nav-container {
display: flex;
background-color: #f40;
color: white;
padding: 0 20px;
}
.category-item {
position: relative;
padding: 10px 15px;
cursor: pointer;
}
.main-category:hover {
background-color: #ff7d44;
}
.sub-category-container {
display: none;
position: absolute;
top: 100%;
left: 0;
background: white;
color: #333;
box-shadow: 0 4px 7px rgba(0,0,0,0.1);
min-width: 200px;
}
.category-item:hover .sub-category-container {
display: block;
}
.sub-category {
padding: 8px 15px;
}
.sub-category:hover {
background: #f5f5f5;
}交互增强
为提升用户体验，可以添加鼠标移入移出事件来控制子菜单的显示与隐藏。
methods: {
showSubMenu(index) {
this.currentIndex = index
},
hideSubMenu() {
this.currentIndex = -1
}
}响应式处理
考虑到不同设备的显示效果，可以添加媒体查询使导航在移动设备上呈现不同的样式。
@media (max-width: 768px) {
.nav-container {
flex-direction: column;
}
.sub-category-container {
position: static;
box-shadow: none;
}
}动态数据加载
实际项目中，导航数据通常从API获取。可以在created或mounted生命周期中发起请求。
async mounted() {
try {
const response = await axios.get('/api/categories')
this.categories = response.data
} catch (error) {
console.error('获取导航数据失败', error)
}
}性能优化
对于大型导航菜单，可以使用v-show代替v-if来减少DOM操作，或者使用虚拟滚动技术处理大量数据的情况。
<div
v-for="(category, index) in categories"
:key="category.name"
@mouseenter="showSubMenu(index)"
@mouseleave="hideSubMenu"
>
<!-- 内容 -->
</div>
