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.解决办法
- 第一步:给
父容器
设置高度: height为 100vh
.index-container {
display: flex;
flex-direction: column;
height: 100vh;
}
height: 100vh // 100vh表示视口的高度,也就是我们常说的一屏显示
- 第二步:给scroll-view设置
.scrollarea {
flex: 1;
overflow: scroll;
}
flex: 1 //表示填充剩余空间。在上图中,去掉标题栏区域和底部导航栏区域占据的空间,剩下的空间都给scroll-view
overflow: scroll //表示当内容超出容器大小时,会显示滚动条以便查看溢出的内容。
3. 运行效果
完美解决