【uni-app踩坑录】scroll-view时而滚不动、时而卡死？彻底解决Flex布局下的高度冲突问题

📌 问题背景

在最近的 uni-app（微信小程序）项目开发中，遇到了一个让人非常头疼的灵异 bug： 一个详情页，外层使用了flex布局（height: 100vh），中间部分使用<scroll-view>占满剩余空间（flex: 1），内部包含了轮播图、富文本以及动态加载的瀑布流组件。

症状表现：页面滑动的时候，“有时候滚不动，有时候又滚得动”，甚至在用力滑动时会触发整个页面的橡皮筋回弹，导致<scroll-view>内部的滚动彻底卡死失效。

🕵️‍♂️ 原因排查与分析

经过一番排查，发现这根本不是 js 逻辑的问题，而是极其经典的CSS 盒模型与 Flex 布局高度计算冲突！

为什么会时而滚得动，时而卡死？

1. 我们的外层容器.hot-detail-page设置了height: 100vh和display: flex。

2. <scroll-view>设置了flex: 1，意图是让它占满剩下的高度。

3. 致命点在于：当<scroll-view>内部的内容（特别是富文本和瀑布流这种按需加载、高度动态变化的内容）瞬间撑大时，由于移动端 Webview 的渲染机制，<scroll-view>本身的高度也会被强行撑开，超出了屏幕的可视区域（100vh）。

4. 这时候，你手指滑动触发的其实是页面的原生滚动（甚至触发了 iOS 的橡皮筋回弹），而不是<scroll-view>的内部滚动。内外两个滚动机制一打架，页面就直接卡死了。

🛠️ 终极解决方案

要彻底解决这个问题，不需要写任何 JS 监听，只需要两行 CSS 代码，用物理手段把<scroll-view>锁死在 Flex 容器里。

修改前的 CSS（错误示范）：

.hot-detail-page { height: 100vh; display: flex; flex-direction: column; } .page-scroll { flex: 1; /* 试图占满剩余空间，但会被内部元素撑爆 */ }

修改后的 CSS（正确示范）：

.hot-detail-page { height: 100vh; display: flex; flex-direction: column; /* 👇 新增1：彻底锁死外层页面的原生滚动，防止上下橡皮筋回弹干扰 */ overflow: hidden; } .page-scroll { flex: 1; /* 👇 新增2：核心修复！强制 scroll-view 重新计算高度 */ height: 0; width: 100%; }

💡 原理小科普

为什么加一个height: 0就神奇地好了？

在 Flex 布局中，当我们给一个子元素同时加上flex: 1和height: 0时，意思是告诉浏览器/小程序引擎：“不要管里面装了多少东西，你的基础内容高度就是 0，然后老老实实根据flex: 1把父级剩下的空间占满就行。”

这样一来，<scroll-view>就有了一个绝对固定且受限的高度，无论内部的瀑布流怎么动态加载、富文本有多长，都无法撑爆外层容器。此时，<scroll-view>的内部滚动机制（scroll-y）就能 100% 完美生效了，再也不会出现滚动冲突！

📝 总结

在移动端开发中，但凡遇到Flex 布局 + scroll-view的组合，尤其是内部含有高度不确定的动态组件时，请养成肌肉记忆： 👉外层容器加overflow: hidden;👉scroll-view 必须加flex: 1; height: 0;

希望这篇避坑笔记能帮到你！如果觉得有用，欢迎点赞收藏~ 👍