假设页面
- 顶部是一个 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 聊聊， 查看更多联系方式
