scroll-view如何自适应页面剩余高度

在uni-app使用中，有如下场景，页面有三个组件，top-bar顶部标题栏高度指定，bottom-bar底部功能菜单栏高度指定，scroll-view区域是一个scroll-view滚动区域，浏览聊天内容。要求scroll-view在这两个组件之间正常显示。

查阅官方文档，文档要求使用竖向滚动时，需要给 <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高度自适应问题怎么办解决 - 开发技术 - 亿速云 (yisu.com)

scroll-view如何自适应页面剩余高度相关推荐

背景平铺两栏自适应（占满剩余高度）fastclick、IScroll双飞翼布局
文章目录背景平铺两栏自适应(占满剩余高度) 需求实现 fastclick插件的使用 IScroll插件的使用(实现区域滚动效果) 条件双飞翼布局(两边固定宽度,中间自适应) 条件实现背景平 ...
css如何让页面填满剩余高度与宽度
首先了解CSS3支持vw(视口宽度)和vh(视口高度)作为单位例如:1vh表示视口高度的1% 所以在CSS3中,我们可以使用calc()函数来进行动态计算: 例如: <div><d ...
百度ueditor自适应(编辑器自适应页面，图片上传宽高，等)
1.编辑器自适应页面在实例化编辑器时加上 initialFrameWidth:'100%',//初始化编辑器宽度代码  <script id=& ...
文字太多时给文本框添加滑动条——text + ContentSizeFitter + Scroll View
文字少的时候,直接显示文字:文字多的时候,自动添加滑动条,拖动滑动条后查看全部文字. 1.字少的时候 2.字多的时候自动增加一个垂直滑动条一.问题的来源在一个固定区域显示文字,这些文字有时候会很多 ...
微信小程序顶部导航栏自定义，根据不同手机自适应距离状态栏高度，防止标题栏高度歪歪扭扭
微信小程序顶部导航栏自定义,根据不同手机自适应距离状态栏高度一.微信小程序顶部导航栏自定义 "navigationStyle": "custom" app. ...
如何在Storyboard中使用Scroll view
本文章环境Xcode 11 在开始使用scroll view之前(storyboard/XIB),我们必须搞清楚两个东西在Storybord/Xib中使用Scroll view,会有哪些结构为什么 ...
unity3d UGUI Scroll View的使用
在使用ugui的时候,碰到了无法设置Scrollbal Horizontal和Scrollbal Vertical成Active(不工作),其根据原因是Content的长度太短,必须比Scroll V ...
uniapp 填充剩余高度
前言 Hbuilder X 2.7.14.20200618 (不清楚uniapp的版本,用工具版本代替) 需求,如下图: 尝试 Flex 布局的flex-grow属性 flex-grow属性定义项目的 ...
jQuery实现等比例缩放大图片让大图片自适应页面布局
在布局页面时,有时会遇到大图片将页面容器"撑破"的情况,尤其是加载外链图片(通常是通过采集的外站的图片).那么本文将为您讲述使用jQuery如何按比例缩放大图片,让大图片自适应页面 ...

scroll-view如何自适应页面剩余高度

scroll-view如何自适应页面剩余高度相关推荐

最新文章

热门文章