vue实现宫格导航
Vue 实现宫格导航的方法
使用 Flex 布局实现基础宫格
通过 Flex 布局可以快速实现等分布局的宫格导航。以下是一个基础实现示例：
<template>
<div class="grid-container">
<div v-for="(item, index) in gridItems" :key="index" class="grid-item">
<img :src="item.icon" alt="">
<span>{{ item.title }}</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
gridItems: [
{ icon: 'icon1.png', title: '功能1' },
{ icon: 'icon2.png', title: '功能2' },
// 更多项目...
]
}
}
}
</script>
<style>
.grid-container {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.grid-item {
flex: 0 0 25%;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
</style>使用 CSS Grid 实现更灵活布局
CSS Grid 提供了更强大的网格布局能力，适合需要更复杂排列的场景：
<template>
<div class="grid-container">
<div v-for="(item, index) in gridItems" :key="index" class="grid-item">
<!-- 内容同上 -->
</div>
</div>
</template>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
padding: 10px;
}
</style>实现响应式宫格导航
通过媒体查询可以实现响应式布局，适应不同屏幕尺寸：
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 480px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}添加交互效果
为宫格项添加悬停效果可以提升用户体验：
.grid-item {
transition: transform 0.3s ease;
}
.grid-item:hover {
transform: scale(1.05);
cursor: pointer;
}使用第三方组件库
对于快速开发，可以考虑使用现成的 UI 组件库：
-
Vant 的 Grid 组件：
<van-grid :column-num="4"> <van-grid-item v-for="(item, index) in gridItems" :key="index" :icon="item.icon" :text="item.title" /> </van-grid> -
Element UI 的 Row/Col 组件：
<el-row :gutter="20"> <el-col v-for="(item, index) in gridItems" :key="index" :span="6"> <div class="grid-item"> <!-- 内容 --> </div> </el-col> </el-row>
动态计算列数
通过计算属性动态确定列数：
computed: {
columnNum() {
if (this.$store.state.isMobile) return 3
return 5
}
}以上方法提供了从基础到进阶的 Vue 宫格导航实现方案，可根据项目需求选择合适的方式。
