微信小程序：自适应高度弹窗内，内容较多时支持滑动

微信小程序中，想要支持滑动，优先使用 <scroll-view>，但是！需要给固定高度：100%/具体值

然而产品、设计需求是：弹窗高度 要自适应，最大高度为屏幕60%，内容较多时滑动窗口展示（波事真多，我八米长的dao呢）

基于flex布局的两种方案

1. 首先弹窗最大高度60vh是确定的
2. 弹窗整体使用flex布局，动态内容区域scroll-vew给 flex:1 占用剩余最大空间（居中不居中那些你们都会哈～）
3. scroll-vew设置y轴可滑动

<view style="max-height: 60vh; display:flex; flex-direction: column;">
    <scroll-view style="flex: 1" scroll-y="{{true}}">
    </scroll-view>
    <view>其他</view>
</view>

三步下来，滚动不了

方案一：给scroll-view一个 height:1px; (该方案ios上会有问题，可能因为ios内置safari浏览器的问题)

<view style="max-height: 80vh; display:flex;">
    <scroll-view style="flex: 1; height:1px;">
    </scroll-view>
    <view>其他</view>
</view>

这个方案别问为什么，问就是不知道（知道的可以评论普及下知识，🧎‍♂️谢谢）

方案二：scroll-view 外面包一层view，并为其设置 style="flex: 1; overflow: scroll;"

<view style="max-height: 80vh; display:flex;">
    <view style="flex: 1; width: 100%; overflow: scroll;">
        <scroll-view style="height: 100%" scroll-y="{{true}}">
        </scroll-view>
    </view>
    <view>其他</view>
</view>

这个方案也别问为什么，问就是不知道（知道的可以评论普及下知识，🧎‍♂️谢谢）

完工

看下你的自适应高度scroll-view是不是就实现需求了

最后完善下样式 （把滑动条干掉）：

::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}