用flex+v-for+后端返回的type/layout结构化数据实现，通过v-if按类型渲染组件，用margin模拟gap，统一图片尺寸并合理设置image mode。
uni-app 里怎么实现淘宝首页那种「推荐位动态布局」？
直接说结论：用 flex + v-for + 后端返回的「区块类型 + 栅格配置」就能跑通，不需要引入复杂布局库。核心不是“怎么画格子”，而是“怎么让不同模块（横图、双列、三宫格、轮播）按需插入并自适应宽度”。
后端必须返回结构化区块数据，不能只给图片数组
淘宝式推荐位的本质是「内容容器可插拔」，前端只负责渲染，不决定结构。如果后端只丢给你一个 goods_list 数组，那你就得硬编码判断第几个是横幅、第几个要切双列——这不可维护，一改版就崩。
正确做法是要求后端返回带 type 和 layout 的区块列表，例如：
[
{ "type": "banner", "data": [...] },
{ "type": "two-col", "data": [...], "layout": { "cols": 2, "gap": 10 } },
{ "type": "grid-3", "data": [...], "layout": { "cols": 3 } },
{ "type": "text-link", "data": { "title": "限时秒杀", "url": "/seckill" } }
]前端用 v-for 遍历这个数组，再用 v-if 匹配 item.type 渲染对应组件。
- 别自己解析字符串 type（比如
"banner_v2"），统一用小写英文+下划线 -
layout字段不是必须，但建议预留，方便后续做 AB 实验或灰度 - 所有图片 URL 必须带完整协议（
https://），uni-app 在小程序端对相对路径处理不稳定
小程序端 flex 换行和 gap 兼容性坑最多
uni-app 编译到微信小程序时，display: flex; flex-wrap: wrap 是支持的，但 gap 属性几乎全平台不生效（包括 H5 和 App）。别信文档里“基础库 2.16.0+ 支持 gap”的说法——实际测试中，iOS 微信仍会忽略。
解决方案只有两个：
- 用
margin模拟 gap：给每个子项加margin-right和margin-bottom，最后一列手动清除margin-right（用:nth-child(3n)或计算 class） - 改用
grid：微信小程序基础库 ≥ 2.16.0 可用display: grid，但支付宝小程序、头条小程序不支持，跨端项目慎用 - 更稳的做法：封装一个
<GridItem>组件，在内部用calc()计算宽度，例如三列时设为width: calc((100% - 20px) / 3)，20px 是两处 gap 总和
示例（双列卡片）：
<view class="two-col">
<view v-for="(item, i) in list" :key="i" class="col-item"
:class="{ 'no-right-margin': (i + 1) % 2 === 0 }">
<image :src="item.img_url"/>
</view>
</view>
<p>.two-col { display: flex; flex-wrap: wrap; }
.col-item {
width: calc((100% - 20px) / 2);
margin-bottom: 10px;
margin-right: 20px;
}
.no-right-margin { margin-right: 0; }图片宽高比不一致会导致布局错乱，必须约束
淘宝推荐位看着整齐，是因为所有商品图都统一裁成了 1:1 或 750rpx×300rpx。如果你直接把后端返回的原始图塞进去，有的竖图、有的横图、有的长条 Banner，flex 会撑开容器，相邻模块上下偏移，用户滑动时明显“抖”。
解决方式不是靠 CSS 强制缩放（会模糊或变形），而是：
- 后端提供多尺寸图，至少返回一个「推荐展示尺寸」字段，如
img_w: 750, img_h: 300 - 前端用
<image mode="aspectFill">（裁剪）或aspectFit（等比缩放留白），根据模块类型选模式 - 轮播 Banner 必须用
mode="widthFix"+ 固定容器高度，否则在 iOS 小程序里会闪烁重绘 - 不要依赖
background-image做图片容器——小程序不支持 background-size: cover 在 image 标签外生效
容易被忽略的一点：aspectFill 在某些安卓机型上会轻微偏移，建议加 overflow: hidden 到父容器兜底。
