当前位置：首页 > VUE

vue实现宫格导航

2026-02-22 21:01:18VUE

Vue 实现宫格导航的方法

使用 Grid 布局实现基础宫格

在 Vue 中可以通过 CSS Grid 布局快速实现宫格导航。定义一个包含多个导航项的父容器，利用 display: grid 和 grid-template-columns 控制列数。

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

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列 */
  gap: 10px;
}
.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>

动态响应列数

通过计算属性动态调整列数，适配不同屏幕尺寸。结合媒体查询或 JavaScript 计算实现响应式。

export default {
  computed: {
    gridColumns() {
      return window.innerWidth < 600 ? 3 : 4;
    }
  }
}

<div class="grid-container" :style="{ 'grid-template-columns': `repeat(${gridColumns}, 1fr)` }">

使用第三方组件库

UI 库如 Vant 或 Element UI 提供现成的宫格组件，可快速集成。

<template>
  <van-grid :column-num="3">
    <van-grid-item v-for="item in navItems" :icon="item.icon" :text="item.title" />
  </van-grid>
</template>

<script>
import { Grid, GridItem } from 'vant';
</script>

添加交互效果

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

<div 
  v-for="item in navItems" 
  @click="handleClick(item)"
  class="grid-item"
  :class="{ 'active': item.active }"
>

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

数据驱动的动态配置

导航数据通过 API 或本地配置动态生成，便于维护和扩展。

vue实现宫格导航

data() {
  return {
    navItems: [
      { icon: 'home.png', title: '首页', path: '/' },
      { icon: 'cart.png', title: '购物车', path: '/cart' }
    ]
  }
}

标签: vue