vue实现九宫格首页

实现九宫格首页的方法

使用 CSS Grid 布局

Vue 结合 CSS Grid 可以快速实现九宫格布局。定义一个包含 9 个项目的数组，通过 v-for 循环渲染，并用 CSS Grid 控制行列分布。

<template>
  <div class="grid-container">
    <div v-for="(item, index) in gridItems" :key="index" class="grid-item">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gridItems: [
        { name: 'Item 1' },
        { name: 'Item 2' },
        { name: 'Item 3' },
        { name: 'Item 4' },
        { name: 'Item 5' },
        { name: 'Item 6' },
        { name: 'Item 7' },
        { name: 'Item 8' },
        { name: 'Item 9' }
      ]
    }
  }
}
</script>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  padding: 10px;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}
</style>

使用 Flexbox 布局

Flexbox 是另一种实现九宫格的方案，适合需要动态调整的场景。通过设置 flex-wrap 和固定宽度实现 3x3 排列。

<template>
  <div class="flex-container">
    <div v-for="(item, index) in gridItems" :key="index" class="flex-item">
      {{ item.name }}
    </div>
  </div>
</template>

<style>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
}

.flex-item {
  flex: 1 0 calc(33.333% - 10px);
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
  box-sizing: border-box;
}
</style>

添加交互效果

为九宫格项目添加点击事件和悬停效果，提升用户体验。

<template>
  <div class="grid-container">
    <div 
      v-for="(item, index) in gridItems" 
      :key="index" 
      class="grid-item"
      @click="handleClick(item)"
      @mouseover="hoverItem = index"
      @mouseleave="hoverItem = null"
      :class="{ 'hover-effect': hoverItem === index }"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hoverItem: null
    }
  },
  methods: {
    handleClick(item) {
      console.log('Clicked:', item.name);
    }
  }
}
</script>

<style>
.hover-effect {
  transform: scale(1.05);
  transition: transform 0.2s;
}
</style>

响应式设计

通过媒体查询调整九宫格在不同屏幕尺寸下的布局，例如在小屏幕上改为 2x2 排列。

@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .flex-item {
    flex: 1 0 calc(50% - 10px);
  }
}

动态数据绑定

从 API 获取数据动态渲染九宫格，适合实际项目场景。

export default {
  data() {
    return {
      gridItems: []
    }
  },
  async created() {
    try {
      const response = await fetch('https://api.example.com/items');
      this.gridItems = await response.json();
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  }
}