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>

优化建议

1. 使用rem单位替代px实现更好的适配
2. 添加hover效果提升交互体验
3. 考虑使用第三方UI库如vant的Grid组件快速实现
4. 对图标使用雪碧图或字体图标减少HTTP请求