短视频商城系统,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如何自适应页面剩余高度, 更多内容欢迎关注之后的文章
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现