vue实现九宫格首页
使用Vue实现九宫格首页
九宫格布局常用于移动端首页导航，以下是基于Vue的实现方法：
基础HTML结构
<template>
<div class="grid-container">
<div v-for="(item, index) in gridItems" :key="index" class="grid-item">
<img :src="item.icon" class="grid-icon">
<span class="grid-text">{{ item.text }}</span>
</div>
</div>
</template>Vue组件数据
<script>
export default {
data() {
return {
gridItems: [
{ icon: '/path/to/icon1.png', text: '功能1' },
{ icon: '/path/to/icon2.png', text: '功能2' },
// ...共9个item
]
}
}
}
</script>CSS样式设置
<style scoped>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 15px;
}
.grid-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
aspect-ratio: 1/1;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.grid-icon {
width: 40px;
height: 40px;
margin-bottom: 8px;
}
.grid-text {
font-size: 14px;
color: #333;
}
</style>响应式处理
添加媒体查询使布局适应不同屏幕尺寸：
@media (max-width: 375px) {
.grid-container {
gap: 5px;
padding: 10px;
}
.grid-icon {
width: 30px;
height: 30px;
}
.grid-text {
font-size: 12px;
}
}点击事件处理
为每个网格项添加点击事件：
methods: {
handleClick(index) {
// 根据index跳转不同页面
const routes = ['/page1', '/page2', /*...*/];
this.$router.push(routes[index]);
}
}在模板中添加点击事件：
<div
v-for="(item, index) in gridItems"
:key="index"
class="grid-item"
@click="handleClick(index)">
<!-- 内容不变 -->
</div>优化建议
- 使用rem单位替代px实现更好的适配
- 添加hover效果提升交互体验
- 考虑使用第三方UI库如vant的Grid组件快速实现
- 对图标使用雪碧图或字体图标减少HTTP请求
