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

更新日期: 2020-11-11 阅读次数: 8106 字数: 198 分类: CSS

假设页面

  • 顶部是一个 banner,class 为 top
  • 余下部分是一个 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%;
}

iphone 5,6 低版本 ios 系统的兼容问题

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

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

微信关注我哦 👍

大象工具微信公众号

我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式

tags: flex 布局