在uniapp中将九宫格（默认3列）调整为四列布局，可通过修改样式实现，若使用flex布局，设置容器display: flex; flex-wrap: wrap;，每个子元素宽度设为25%（width: 25%;），配合gap属性控制间距；若使用grid布局，直接设置容器display: grid; grid-template-columns: repeat(4, 1fr);，即可均分四列，需注意内容宽高适配，避免溢出，同时根据实际需求调整间距（如gap: 10rpx;），确保在不同设备上展示协调，此调整适用于商品列表、功能入口等场景，优化页面空间利用率。
Uniapp：九宫格布局轻松调整为四列
在Uniapp开发中,九宫格（三列三行）是一种极为常见的布局方式，广泛应用于首页导航、功能入口、商品展示等多种场景，随着业务需求的不断变化，我们经常会遇到需要将九宫格调整为四列的情况——例如功能入口增加、设计稿要求更紧凑的排列，或是为了适配大屏设备的显示需求，本文将详细介绍如何将Uniapp中的九宫格布局改造为四列，涵盖Flex布局和Grid布局两种常用方法，并提供完整代码示例、常见问题解决方案及性能优化建议。
布局思路：从"九宫格"到"四列"的核心变化
九宫格的本质是"每行3列，共3行"的固定布局，而四列布局则转变为"每行4列，行数根据数据动态调整"的灵活布局，这种转变涉及两个核心要素的变化：列数的精确控制和元素排列方式的优化，在Uniapp中，我们可以通过CSS布局属性（如flex、grid）或循环渲染时的列数计算来实现这一调整，选择哪种布局方式，主要取决于项目需求、兼容性要求以及开发者的熟悉程度。
使用Flex布局实现四列
Flex布局是Uniapp中最常用的布局方式之一,通过设置flex-wrap、flex或width属性，可以灵活控制每行的列数，这种方法兼容性好，在各种设备上表现稳定。
模板结构：循环渲染数据
假设我们有一个功能列表数据,通过v-for循环渲染每个功能项，并用容器包裹所有项：
<template>
<view class="container">
<view
v-for="(item, index) in functionList"
:key="index"
class="function-item"
@click="handleItemClick(item)"
>
<image :src="item.icon" mode="aspectFit" class="item-icon"></image>
<text class="item-text">{{ item.name }}</text>
</view>
</view>
</template>
样式设置：Flex布局控制每行4列
通过设置容器为flex布局，并开启flex-wrap允许换行，再给每个子项设置固定宽度（或百分比），确保每行显示4项：
<style>
.container {
display: flex; /* 开启flex布局 */
flex-wrap: wrap; /* 允许换行，实现多行排列 */
padding: 20rpx;
background-color: #f5f5f5;
justify-content: space-between; /* 优化间距分布 */
}
.function-item {
width: calc(25% - 15rpx); /* 每行4列，减去间距后宽度 */
height: 200rpx; /* 固定高度，可根据需求调整 */
display: flex;
flex-direction: column; /* 图文纵向排列 */
align-items: center;
justify-content: center;
box-sizing: border-box; /* padding和border计入宽度 */
background-color: #fff;
margin: 10rpx 0; /* 上下间距 */
border-radius: 12rpx; /* 圆角 */
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); /* 轻微阴影增加层次感 */
transition: all 0.3s ease; /* 添加过渡效果 */
}
.function-item:active {
transform: scale(0.95); /* 点击时的缩放效果 */
background-color: #f8f8f8;
}
.item-icon {
width: 60rpx;
height: 60rpx;
margin-bottom: 10rpx;
}
.item-text {
font-size: 28rpx;
color: #333;
text-align: center;
}
</style>
数据示例
定义一个包含16项的功能列表（4行×4列），确保数据量适配四列布局：
<script>
export default {
data() {
return {
functionList: [
{ name: '首页', icon: '/static/icons/home.png', path: '/pages/index/index' },
{ name: '订单', icon: '/static/icons/order.png', path: '/pages/order/list' },
{ name: '购物车', icon: '/static/icons/cart.png', path: '/pages/cart/index' },
{ name: '我的', icon: '/static/icons/user.png', path: '/pages/user/index' },
{ name: '搜索', icon: '/static/icons/search.png', path: '/pages/search/index' },
{ name: '消息', icon: '/static/icons/message.png', path: '/pages/message/index' },
{ name: '收藏', icon: '/static/icons/favorite.png', path: '/pages/favorite/index' },
{ name: '设置', icon: '/static/icons/setting.png', path: '/pages/setting/index' },
{ name: '优惠券', icon: '/static/icons/coupon.png', path: '/pages/coupon/index' },
{ name: '地址', icon: '/static/icons/address.png', path: '/pages/address/list' },
{ name: '客服', icon: '/static/icons/service.png', path: '/pages/service/index' },
{ name: '反馈', icon: '/static/icons/feedback.png', path: '/pages/feedback/index' },
{ name: '帮助', icon: '/static/icons/help.png', path: '/pages/help/index' },
{ name: '#39;, icon: '/static/icons/about.png', path: '/pages/about/index' },
{ name: '分享', icon: '/static/icons/share.png', path: '/pages/share/index' },
{ name: '更多', icon: '/static/icons/more.png', path: '/pages/more/index' }
]
}
},
methods: {
handleItemClick(item) {
// 点击跳转逻辑
if (item.path) {
uni.navigateTo({
url: item.path
});
} else {
uni.showToast({
title: '功能开发中',
icon: 'none'
});
}
}
