【爬坑】uniapp中scroll-view自适应高度

最新推荐文章于 2025-06-06 10:45:25 发布

Eder-全栈开发

最新推荐文章于 2025-06-06 10:45:25 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：爬坑文章标签： uni-app

本文链接：https://blog.csdn.net/qq_38860087/article/details/119068214

本文介绍了在uniapp中解决scroll-view自适应高度的问题，重点强调了在onReady中执行、选择器精确到scroll-view最外层及正确设置可用高度减去top的注意事项，确保在h5和app端都能正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看了好多博客上处理uniapp的scroll-view自适应高度很多教程都是不能完全解决的，有的教程h5正常，app端就不正常了，我也是从教程简单的修改而达到h5和app都正常的，下面放代码

onReady() {
   
    //这里不要用onLoad，要不然提示错误
			uni.getSystemInfo({
   
   
				success: (res) => {
   
   
					let query=uni.createSelectorQuery().select(".roll");

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Eder-全栈开发

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uniapp 自适应高度swiper

m0_65747046的博客

01-16

521

组件实现了类似淘宝首页金刚区的分页轮播效果，支持动态高度调整，并兼容 UniApp（Web、iOS 和 Android 平台）。

uniapp计算scroll-view的剩余高度

那片枫叶~

03-01

1910

1、主要计算滚动组件的高度，避免屏幕出现滚动条，需求如下 <scroll-view :scroll-top="scrollTop" :style="{ height: scrollHeight}" scroll-y="true" enable-back-to-top > <slot></slot> </scroll-view> <script> // windowHeight ：不包含NavigationBa.

参与评论您还未登录，请先登录后发表或查看评论

uniApp scroll-view高度自适应

前端

09-06

3747

方法: 使用flex布局,上下文有高度(或者撑起的高度), scroll-view设置样式为flex:1 <template> <view class="wrap"> <-- 这里是其他的一些元素占据高度 --> <view style="height: 600upx;width: 100%;"> 123 </view> <scroll-view class="scroll-box" scroll-y @scrolltolower=

uniapp实战 —— 可滚动区域 scroll-view （自适配高度，下拉刷新）

朝阳39的博客

12-07

4318

如图可见，在页面滚动过程中，顶部导航栏和底栏未动，仅中间的内容区域可滚动。自定义的顶部导航栏，可参考博文。

uniapp scroll-view横向滚动不起效、纵向滚动自适应高度

最新发布

weixin_42050406的博客

06-06

316

增加 :scroll-top=“scrollTop”，在切换tab时把scrollTop = 0。纵向滚动还遇到问题，切换到不同tab时，滚动条不复位，依然保持在上一次的滚动位置；使用竖向滚动时，需要给一个固定高度，通过 css 设置 height；如果不想写死、不想通过js计算，希望灵活获取高度应该怎么做呢，用css即可。但这样写没有生效，哎，为什么呢。

uniapp scroll-view 组件无法确定内容的固定高度怎么解决

T3165919332的博客

12-28

1766

如果你无法确定内容的固定高度，可以使用 JavaScript 动态计算高度并设置给。属性来启用垂直滚动。高度被设置为视口高度的100%（scroll-view组件无法确定内容的高度。），这是一种在不知道固定高度的情况下，方法用于根据实际情况计算内容的高度。使其占据整个屏幕高度。

高度自适应scroll-view，uniapp项目

Frank_colo的博客

01-13

845

【代码】高度自适应scroll-view。

uniapp scroll view 解决高度自适应、弹框滚动穿透等问题。

wcdunf的博客

06-30

4468

在uniapp中scroll view 需要给固定高度，根据不同手机高度不一样，scroll view高度不相同，uniapp中不能进行dom操作，如何让scroll view适应不同手机高度，计算好高度如何给scroll view 设置高度呢通过uni.getSystemInfoSync()获取窗口宽度和高度动态设置 scroll-view 高度 :style动态绑定height高度打印uni.getSystemInfoSync() 这里获得的高度是物理高度px 如何转成rpx 在cumputed计算属性

uniapp scroll-view滚动触底加载 height高度自适应

在职可交流前端开发，包括：web端、uniapp等，欢迎指教。

08-30

1876

uniapp 的组件scroll-view在实现触底加载的功能的时候，首先在App上可以滚动，就必须设置高度；触底加载的动态效果，会发起网络请求的，不用设置height，通过css设置min-height:0

【uniapp】解决scroll-view滚动视图组件无法自适应高度问题

落叶随风将要去远方，看沿途的风景回忆一场...

11-30

5057

在做前端做页面通常使用的是弹性伸缩布局的，它的好处是，可以达到无缝拼接布局，充分占用剩余的空间布局，但有个滚动视图组件显然无法自适应高度，固定高度那不是自己想要的，现在要实现自适应高度，要怎么处理才好呢。

C++中函数调用时的三种参数传递方式详解

qq_23923713的博客

11-28

436

原文地址：https://blog.csdn.net/ccblogger/article/details/77752659?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.co

uniapp h5 scroll-view高度自适应

04-11

在UniApp中，使用H5的scroll-view组件时，可以通过设置高度自适应来实现内容超出屏幕高度时的滚动效果。以下是一种实现方式： 1. 在页面的样式文件（如`index.vue`）中，给scroll-view组件添加一个样式类，并设置其...

uniapp的scroll-view高度自适应

08-27

要实现`uni-app`中`scroll-view`的高度自适应，可以采用以下几种方法： 1. 使用flex布局：将`scroll-view`的父容器设置为flex布局，并将`scroll-view`的高度设置为100%。这样`scroll-view`会自动拉伸以适应父容器的...

uniapp scroll-view标签自适应页面剩余部分高度

weixin_51412569的博客

05-23

381

模板js。

uni-app中scroll-view的高度问题，填满剩下的高度且高度自适应