uni-app 可通过 scroll-view + sticky + uni-popup + uni.previewImage 实现商品详情页分屏交互，H5 和小程序双端兼容；需动态计算高度、避免 fixed、设置 z-index 和硬件加速、统一弹层遮罩、使用完整 URL 图片、手动判断滚动边界。
uni-app 无法原生支持系统级分屏（如 Android 多窗口模式），但商品详情页常见的「上下分屏交互」——比如顶部轮播图固定、中部 SKU 选择区吸顶、底部购物车按钮常驻、中间图文详情独立滚动——完全可以通过 CSS 布局 + scroll-view + 生命周期控制实现，且 H5 和小程序双端兼容。
用 scroll-view 切割可滚动区域，避免页面整体滚动错乱
淘宝详情页的典型结构是：顶部 banner 不随页面滚动 → 中间图文详情需独立纵向滚动 → 底部操作栏始终可见。直接用 page 级滚动会导致 banner 被滚走、吸顶失效、iOS 微信下 touch 事件穿透等问题。
- 必须用
scroll-view包裹图文详情区域，并显式设置scroll-y，禁用scroll-x（否则 iOS 微信卡顿） -
scroll-view高度不能写死为100vh，要动态计算：用uni.getSystemInfoSync().windowHeight减去 banner 高度、SKU 区高度、底部 tabBar 高度（注意区分是否启用自定义 tabBar） - 微信小程序中，
scroll-view的scroll-into-view在首次渲染时可能无效，建议在onReady后setTimeout50ms 再触发
SKU 选择区吸顶要用 position: sticky，别用 fixed
很多开发者用 position: fixed 实现吸顶，结果在 iOS 微信里出现定位偏移、z-index 失效、输入框弹起后遮挡等问题。uni-app 小程序端对 fixed 支持极不稳定。
- 正确做法：给 SKU 区外层加
position: sticky; top: 0;，并确保其父容器有明确高度（如 flex 布局中的中间区域） - 必须设置
z-index（至少 999），否则会被scroll-view内容盖住 - H5 端需额外加
transform: translateZ(0)触发硬件加速，防止吸顶抖动
左右分屏式 SKU 弹层，用 uni-popup + flex 布局最稳
淘宝详情页点击「选择规格」弹出的半屏弹层，本质是左右分栏：左列属性（颜色、尺码）、右列对应库存/价格。不用 iframe，也不用新开页面。
- 用
uni-popup的type="bottom"模式，设customStyle="height: 80vh;"控制高度 - 内部用
display: flex分左右，左列宽度固定（如200rpx），右列flex: 1自适应 - 右列内容用
scroll-view scroll-y包裹，否则长属性列表无法滚动 - 关键坑：
uni-popup在 App 端默认会透出背景遮罩，需手动设mask-style="background-color: rgba(0, 0, 0, 0.5);"统一表现
图片放大查看必须用 uni.previewImage，别自己写全屏组件
轮播图点击放大，看似简单，但自己实现手势缩放、双击放大、多图切换，在小程序里兼容性极差：iOS 微信不支持 touch-action: manipulation，安卓部分机型 pinch-zoom 失效。
- 直接调
uni.previewImage({ sources: imgList, current: index })，这是 uni-app 官方封装的原生能力，H5、微信、支付宝、App 全端一致 -
imgList必须是完整 URL（带https://），小程序不识别相对路径或本地临时路径 - 如果轮播图用了
swiper，记得在@change回调里更新current索引，否则预览时默认从第一张开始
最易被忽略的是滚动边界判断：当用户快速滑动图文区到底部时，需要自动收起 SKU 吸顶层、显示“回到顶部”按钮。这个逻辑不能只靠 scroll-view 的 scrolltolower 事件——它在 iOS 微信里经常不触发，得结合 scrollTop 和容器 scrollHeight 手动比对，且要防抖。
