当前位置：首页 > VUE

vue实现九宫格首页

2026-01-12 08:41:31VUE

Vue 实现九宫格首页

基础布局结构

使用 Vue 的模板语法结合 CSS Grid 或 Flexbox 实现九宫格布局。以下是一个基于 CSS Grid 的示例：

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

.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;
  height: 100px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.icon {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
}

数据驱动内容

通过 v-for 动态渲染九宫格内容，数据建议存储在组件的 data 中：

export default {
  data() {
    return {
      gridItems: [
        { icon: 'path/to/icon1.png', text: '功能1' },
        { icon: 'path/to/icon2.png', text: '功能2' },
        // ...其他7项数据
      ]
    }
  }
}

交互功能增强

为每个格子添加点击事件，通过 @click 绑定方法：

<div 
  v-for="(item, index) in gridItems" 
  :key="index" 
  class="grid-item"
  @click="handleGridClick(index)">
  <!-- 内容 -->
</div>

methods: {
  handleGridClick(index) {
    const actions = [
      () => this.goToPage1(),
      () => this.showModal(),
      // ...其他动作
    ];
    actions[index]?.();
  }
}

响应式适配

通过媒体查询调整不同屏幕尺寸下的布局：

@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 400px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

动画效果

使用 Vue 的过渡或 CSS 动画增强用户体验：

.grid-item {
  transition: transform 0.2s;
}

.grid-item:hover {
  transform: scale(1.05);
}

完整组件示例

整合后的单文件组件示例：

<template>
  <div class="grid-container">
    <div 
      v-for="(item, index) in gridItems" 
      :key="index" 
      class="grid-item"
      @click="handleGridClick(index)">
      <img :src="item.icon" class="icon" />
      <span>{{ item.text }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gridItems: [
        { icon: 'icon1.png', text: '功能1' },
        { icon: 'icon2.png', text: '功能2' },
        // ...其他7项
      ]
    }
  },
  methods: {
    handleGridClick(index) {
      console.log(`点击了第${index + 1}个格子`);
    }
  }
}
</script>

<style scoped>
/* 前述CSS内容 */
</style>

vue实现九宫格首页