直播平台开发，scroll-view如何自适应页面剩余高度
首先想到的方法是通过计算得出scroll-view的高度，使用100vh即视口高度，减去上下两个组件和手机状态栏的高度，得到剩余的高度即scroll-view的高度。
onLoad(options){
uni.getSystemInfo({
success: (res) => {
// 获取手机状态栏高度
this.statusBarHeight = res.statusBarHeight;
this.scrollviewHeight = `calc(100vh - 98rpx - 110rpx - ${this.statusBarHeight}px)`;
}
});
}
给标签添加行内样式：
<scroll-view class="chat-main"
scroll-y="true"
:scroll-into-view="scrollToView"
:scroll-with-animation="needScrollAnimation"
@scrolltoupper="debounce"
:style="{height:scrollviewHeight}">
</scroll-view>
但这种方法需要使用js计算不太简便，可以使用flex布局，将主轴设为y轴，随后指定另外两个组件的高度，scroll-view区域使用flex:1高度自适应即可。需要注意的是除了自适应区域以外的元素一定要指定高度，如果没有确定的高度可以指定相对高度。还有就是page是小程序默认包裹在最外层的标签，也要指定高度height:100%
<view class="box">
<top-bar class="box-head"></top-bar>
<scroll-view class="box-scroll"></scroll-view>
<bottom-bar class="box-bottom"></bottom-bar>
</view>
page{
height:100%;
}
.box {
display: flex;
flex-direction:column;
height:100vh; /*高度必须指定 或者写成100%*/
overflow:hidden;
}
.box-head {
flex-shrink: 0;
height: 55px;
}
.box-scroll {
flex: 1;
overflow: scroll; /*必须写这一条*/
height: 1px;
}
.box-bottom {
height:49px;
}
以上就是 直播平台开发，scroll-view如何自适应页面剩余高度，更多内容欢迎关注之后的文章
标签：box,flex,高度,height,view,scroll,页面 From： https://www.cnblogs.com/yunbaomengnan/p/16944321.html