当前位置：首页 > uni-app

uniapp四宫格布局

2026-02-06 17:23:21uni-app

四宫格布局实现方法

在UniApp中实现四宫格布局，可以通过flex布局或grid布局完成。以下是两种常见的方法：

方法一：使用Flex布局

<template>
  <view class="container">
    <view class="row" v-for="(row, rowIndex) in gridData" :key="rowIndex">
      <view class="item" v-for="(item, colIndex) in row" :key="colIndex">
        {{ item }}
      </view>
    </view>
  </view>
</template>

<style>
.container {
  padding: 10px;
}
.row {
  display: flex;
  margin-bottom: 10px;
}
.item {
  flex: 1;
  height: 100px;
  margin: 0 5px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

<script>
export default {
  data() {
    return {
      gridData: [
        ['1', '2'],
        ['3', '4']
      ]
    }
  }
}
</script>

方法二：使用Grid布局

<template>
  <view class="grid-container">
    <view class="grid-item" v-for="(item, index) in items" :key="index">
      {{ item }}
    </view>
  </view>
</template>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  padding: 10px;
}
.grid-item {
  height: 100px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

<script>
export default {
  data() {
    return {
      items: ['1', '2', '3', '4']
    }
  }
}
</script>

动态调整间距

可以通过修改CSS中的grid-gap或margin属性来调整格子间距：

/* Flex布局调整间距 */
.item {
  margin: 0 10px 10px 10px;
}

/* Grid布局调整间距 */
.grid-container {
  grid-gap: 15px;
}

响应式设计

添加媒体查询使布局在不同屏幕尺寸下自适应：

@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

点击事件处理

为每个格子添加点击事件：

<view class="grid-item" v-for="(item, index) in items" :key="index" @click="handleClick(index)">
  {{ item }}
</view>

<script>
methods: {
  handleClick(index) {
    uni.showToast({
      title: `点击了第${index + 1}个格子`,
      icon: 'none'
    })
  }
}
</script>

uniapp四宫格布局