微信小程序 scroll view 占据页面剩余高度

假设页面

实现方法

Page {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.top {
}

.bottom {
  flex: 1;
}

在没有数据时，这样的布局看上去没有问题。但是一旦填充上数据，会发现 scroll view 的高度会被撑开。

<view class="bottom">
    <scroll-view class="sv" scroll-y="true">
    </scroll-view>
</view>

给 scroll view 外面包一层 view:

.bottom {
  flex: 1;
  height: 100px; /* 黑科技，任意值 */
}

.sv {
  height: 100%;
}

使用 height 100px 这种黑科技，实际上在低版本的 ios 系统上会有兼容问题。

如果是占全屏，推荐使用 height 100vh，但是只占一部分，除了计算高度，暂时没有找到好方法。