短视频商城系统，scroll-view如何自适应页面剩余高度

短视频商城系统，scroll-view如何自适应页面剩余高度

 

1	onLoad(options){<br>uni.getSystemInfo({<br>success: (res) => {<br>// 获取手机状态栏高度<br>this.statusBarHeight = res.statusBarHeight;<br>this.scrollviewHeight = `calc(100vh - 98rpx - 110rpx - ${this.statusBarHeight}px)`;<br>}<br>});<br>}

​

给标签添加行内样式：

 

1	<br><scroll-view class="chat-main" <br> scroll-y="true" <br> :scroll-into-view="scrollToView"<br> :scroll-with-animation="needScrollAnimation"<br> @scrolltoupper="debounce"<br> :style="{height:scrollviewHeight}"><br></scroll-view>

 

但这种方法需要使用js计算不太简便，可以使用flex布局，将主轴设为y轴，随后指定另外两个组件的高度，scroll-view区域使用flex:1高度自适应即可。需要注意的是除了自适应区域以外的元素一定要指定高度，如果没有确定的高度可以指定相对高度。还有就是page是小程序默认包裹在最外层的标签，也要指定高度height:100%

 

1

<br><view class="box"> <br> <top-bar class="box-head"></top-bar><br> <scroll-view class="box-scroll"></scroll-view><br> <bottom-bar class="box-bottom"></bottom-bar><br></view><br>page{<br> height:100%;<br>}<br>.box {<br> display: flex;<br> flex-direction:column;<br> height:100vh;     /*高度必须指定 或者写成100%*/<br> overflow:hidden;<br>}<br>.box-head {<br> flex-shrink: 0;<br> height: 55px;<br>}<br>.box-scroll {<br> flex: 1;<br> overflow: scroll;   /*必须写这一条*/<br> height: 1px;<br>}<br>.box-bottom {<br> height:49px;<br>}

 

以上就是短视频商城系统，scroll-view如何自适应页面剩余高度， 更多内容欢迎关注之后的文章