uni-app中实现双列商品列表最稳方式是用flex布局：父容器设display: flex; flex-wrap: wrap; 子项设width: 48%; margin: 0 1% 20rpx; 避免flex: 1和calc混用，图片固定高度并用@load触发重排。
uni-app里用flex实现双列商品列表最稳的方式
双列布局不等于瀑布流，多数京东式商品页其实只是等高两列flex布局，而非真正动态高度的瀑布流。强行上瀑布流反而增加白屏、错位、滚动卡顿风险。
推荐直接用display: flex; flex-wrap: wrap + width: 48%控制子项，配合margin留间隙。关键点在于：父容器必须有明确width（如100%），且子项不能用flex: 1或width: 50%——后者在某些Android WebView下会因小数像素导致换行错乱。
-
view容器设display: flex; flex-wrap: wrap; padding: 0 10rpx - 每个商品
view设width: 48%; margin: 0 1% 20rpx;（左右各1%，避免总宽超100%） - 图片统一用
mode="aspectFill"，并设固定height（如300rpx），防止内容高度不一致拉伸错位 - 避免在子项里用
flex: 1或flex-grow，uni-app的flex在iOS和安卓表现不一致
真瀑布流别硬套uni-app原生组件
uni-app没有内置瀑布流组件，scroll-view加position: absolute手动计算位置的方式极易出bug：滚动时元素重叠、onScroll触发频率低导致卡顿、iOS下scrollTop不准、无法复用virtual-list优化。
如果确实需要动态高度瀑布流（比如图文混排+视频卡片），优先用成熟第三方库：vue-virtual-scroller或vue-waterfall-easy，但注意它们在app-plus平台需额外配置renderjs支持，H5端可直接用，微信小程序端基本不可用。
- 引入
vue-waterfall-easy后，必须把waterfall-item的height设为auto，并在mounted中调用this.$refs.waterfall.refresh()强制重算 - 禁用
scroll-view的enhanced属性，否则与瀑布流JS计算冲突 - 每张图加载完要主动触发
refresh()，否则新图片撑开高度后下方卡片不重新定位
uni-app条件编译下双列布局的兼容写法
不同平台对rpx解析精度不同：微信小程序支持到0.5rpx，App端部分Android机型只认整数rpx，H5端则依赖CSS缩放。所以48%比492rpx更可靠，但间距不能全靠rpx。
推荐用条件编译区分间隙单位：
<view class="goods-list"><view v-for="(item, i) in list" :key="i" class="goods-item"></view></view><p>/<em> #ifdef MP-WEIXIN </em>/
.goods-item { margin: 0 12rpx 20rpx; width: 48%; }
/<em> #endif </em>/</p><p>/<em> #ifdef APP-PLUS </em>/
.goods-item { margin: 0 12px 20px; width: 48%; }
/<em> #endif </em>/</p><p>/<em> #ifdef H5 </em>/
.goods-item { margin: 0 12px 20px; width: 48%; }
/<em> #endif </em>/
</p>
- 所有平台统一用
%控列宽，杜绝rpx在App端四舍五入误差 - 间距用
rpx仅限小程序，App/H5统一用px，由uni.upx2px()在运行时转换（但这里没必要，静态值更稳） - 避免在
style绑定中写width: calc(50% - 10rpx)，H5和App都不支持calc混用rpx
图片加载导致双列错位的修复时机
商品图异步加载完成前高度为0，加载后突然撑开，常导致右侧卡片被顶到下一行——这不是布局问题，是渲染时机问题。
解决方式不是等所有图加载完再显示，而是用image组件的@load事件逐个通知重排：
<image :src="item.pic" mode="aspectFill" style="width: 100%; height: 300rpx;"></image>
- 在
onImageLoad里调用this.$nextTick(() => { this.$forceUpdate() })，触发当前item所在行重排 - 不要用
v-if控制图片显隐，会导致频繁DOM销毁重建；用v-show+ 占位background-color更轻量 - 服务端返回的图片尺寸建议统一裁剪为宽高比
1:1或3:4，前端不用再计算
双列布局的“稳”来自克制——少用动态计算，多靠CSS约束；瀑布流的“可用”来自取舍——明确哪些平台必须支持，哪些可以降级为普通双列。真正在意首屏速度和滚动体验，就别迷信“瀑布流”这个词本身。
