微信小程序开发，解决scroll-view高度自适应问题的方法

1. 前言导读

scroll-view官方文档指南：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

在微信小程序开发中，经常会用到scroll-view 滑动组件，官方文档有明确说明在使用scroll-view必须要设置高度（见上图），否者无效。在实际开发过程过，我们希望scroll-view自适应剩余高度，不想把高度写死。这种场景在开发过程还是蛮常见的，如下图所示：

在上图中，有标题栏区域，内容区域，有底部导航栏区域，在内容区域中，一屏显示不下去，就需要滑动，所以就需要使用scroll-view来包裹，但scroll-view的高度无法确定，那就不能写死，那如何解决呢？

2.解决办法

1. 第一步：给父容器设置高度： height为 100vh

.index-container {
    
    
  display: flex;
  flex-direction: column;
  height: 100vh;
}

height: 100vh // 100vh表示视口的高度，也就是我们常说的一屏显示

2. 第二步：给scroll-view设置

.scrollarea {
    
    
  flex: 1;
  overflow: scroll;
}

flex: 1 //表示填充剩余空间。在上图中，去掉标题栏区域和底部导航栏区域占据的空间，剩下的空间都给scroll-view
overflow: scroll //表示当内容超出容器大小时，会显示滚动条以便查看溢出的内容。

3. 运行效果

完美解决