uniapp四宫格布局
四宫格布局实现方法
在UniApp中实现四宫格布局，可以通过Flex布局或Grid布局完成。以下是两种常用方法：
Flex布局方案
使用flex-wrap: wrap让元素自动换行，结合width: 50%实现2x2排列：
<template>
<view class="grid-container">
<view class="grid-item" v-for="(item, index) in 4" :key="index">
<!-- 内容区 -->
</view>
</view>
</template>
<style>
.grid-container {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.grid-item {
width: 50%;
height: 200rpx;
box-sizing: border-box;
padding: 10rpx;
}
</style>Grid布局方案
通过CSS Grid实现更精确的控制：
<template>
<view class="grid-container">
<view class="grid-item" v-for="(item, index) in 4" :key="index">
<!-- 内容区 -->
</view>
</view>
</template>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10rpx;
width: 100%;
height: 400rpx;
}
.grid-item {
background-color: #f0f0f0;
}
</style>动态数据绑定示例
结合数据循环渲染四宫格内容：
<template>
<view class="grid-container">
<view
class="grid-item"
v-for="(item, index) in gridData"
:key="index"
@click="handleClick(item)"
>
<image :src="item.icon" mode="aspectFit"/>
<text>{{item.title}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
gridData: [
{ icon: '/static/icon1.png', title: '功能1' },
{ icon: '/static/icon2.png', title: '功能2' },
{ icon: '/static/icon3.png', title: '功能3' },
{ icon: '/static/icon4.png', title: '功能4' }
]
}
},
methods: {
handleClick(item) {
uni.showToast({ title: `点击了${item.title}` })
}
}
}
</script>样式优化技巧
添加间距和视觉效果：
.grid-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 12rpx;
margin: 10rpx;
box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1);
}
.grid-item image {
width: 80rpx;
height: 80rpx;
margin-bottom: 15rpx;
}
.grid-item text {
font-size: 26rpx;
color: #333;
}响应式适配方案
通过计算属性实现不同屏幕尺寸适配：
computed: {
itemSize() {
const systemInfo = uni.getSystemInfoSync()
return (systemInfo.windowWidth - 30) / 2
}
}在模板中使用计算属性：
<view
class="grid-item"
:style="{width: itemSize + 'px', height: itemSize + 'px'}"
>注意事项
- 在H5端使用
vw/vh单位可能更灵活 - 小程序中避免使用百分比边距，改用固定rpx值
- 图片资源建议使用绝对路径
/static/ - 点击事件建议添加
hover-class提升交互体验
