【uniapp】解决scroll-view滚动视图组件无法自适应高度问题

在做前端做页面通常使用的是弹性伸缩布局flex的，它的好处是，可以达到无缝拼接布局，充分占用剩余的空间布局，但有个scroll-view滚动视图组件显然无法自适应高度，固定高度那不是自己想要的，现在要实现自适应高度，要怎么处理才好呢。

1. 发现问题

首先，看一下源代码，大致是这样写的，样式用的flex纵向布局

<view class="page-content">
	<view>
		<!-- 省略其它的布局 -->
	</view>
	<scroll-view class="page-content-scroll" :enable-flex="true" :scroll-y="true">
		<view class="">
			<!-- 可滚动的区域 -->
		</view>
	</scroll-view>
</view>

滚动视图scroll-view设置的样式为 flex:1;，自适应填充高度，如下图所示，

⚠ 发现问题
一开始看着效果是没问题的，可当视图里的内容超出高度时就会被伸开，从而导致原来保持的布局大小被打乱，这是一个问题

2. 解决问题

通过排查后发现，只需要再加个样式overflow-y:auto;就可以了，如下图所示

这样就能自适应高度了，不得不说，CSS样式要用到精通才行哦~

💡小提示
不需要按照官方文档上说得要设置高度(固定)，用自适应高度才舒适~