(01)、uni-app 计算scroll-view所占手机屏幕的 剩余高度

最新推荐文章于 2025-09-20 14:11:57 发布
原创 最新推荐文章于 2025-09-20 14:11:57 发布 · 1.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何在uni-app中计算scroll-view组件在手机屏幕上的剩余高度。通过使用uni.getSystemInfo获取设备可见总高度，并结合uni.createSelectorQuery获取除scroll-view外的其他容器高度，最终实现计算scroll-view剩余高度的功能。

uni-app 计算scroll-view所占手机屏幕的 剩余高度

思路：

获取设备的可见总高度（uni.getSystemInfo(OBJECT)）
获取除了scroll-view的其他容器高度``（uni.createSelectorQuery()）

代码实现
在这里插入图片描述

说明：

.exec() ：方法执行

uniapp 获取页面高度及元素高度
weixin_46167462的博客
05-12 6327
获取页面高度及元素高度
uni-app 获取 scroll-view高度 获取页面剩余高度 所占手机屏幕的剩余高度
以后永远的博客
04-08 7309
uni-app 获取自定义可视化高度 1.问题场景 直接上图 我想获取下面的view 可视化高度 下边图片标记的框保证数据多时，内容可以滑动 做到看视频时 可以看到下方内容。 2.解决思路 从上图可见 使用页面的总体高度 - 减去 标题的红框上方的高度（多余高度）即可解决此类问题。 也就是说 height = pageHeight - otherHeight； 3.官网描述(动态获取节点信息...
UNIAPP---获取设备系统信息（高度、宽度）【uni.getSystemInfo】
heavenz19的博客
09-22 4043
官方文档：https://uniapp.dcloud.net.cn/api/system/info.html。
uniap获取导航栏高度和状态栏的高度
2301_76603744的博客
08-16 561
以上像素单位都是px，如果说我们在实际开发中用的是rpx，这个时候就会有误差，我们只需把获取到的值转换为rpx就可以了。第二种获取状态栏的高度。第四种直接拿app获取的。获取手机的导航栏高度。第一种获取状态栏的高度。第三种获取状态栏的高度。
uni-app scroll-view自适应滚动
m0_57068257的博客
07-28 1635
scroll-view滚动范围不支持通过百分比以及flex：1进行设置，所以需要计算出一个准确的高度；通过获取根标签下所有一级标签高度以及设置的上下外边距之和，再由根标签高度进行相减最终得出滚动高度。
UNI-APP_获取系统信息，获取可使用高度
小歪博客
12-24 733
https://uniapp.dcloud.io/api/system/info?id=getsysteminfo uni.getSystemInfo({ success: (res) => { this.windowHeight = res.windowHeight } }); windowHeight不包含NavigationBar和TabBar的高度
uni-app api 获取系统信息（高、宽）用法及封装
假装是个web dog
03-10 1994
uni-app api 获取系统信息（高、宽）用法及封装
uni-app 用scroll-view实现横向滚动
最新发布
qq_36158551的博客
09-20 708
scroll-view是uni-app内置的可滚动视图区域组件，支持横向和纵向滚动配置。适用于商品横向展示、长列表内容展示等需要局部滚动的场景。核心属性：（1）scroll-x：启用横向滚动（2）scroll-y：启用纵向滚动（3）scroll-top：设置竖向滚动位置（4）scroll-left：设置横向滚动位置scroll-view，必须设置：white-space: nowrap;
uni-app(vue3)动态获取swiper的区域高度以及通过scroll-view实现区域滚动和scroll-view的置顶功能
qq_39691676的博客
04-28 1023
计算方式:swiper高度 = page高度 - tabs高度 - search高度。
小程序-uni-app：scroll-view/区域滚动、下拉刷新、上拉加载更多
snow的博客
07-24 7176
开发环境：小程序、uniapp + vue3 + ts实现功能：列表页面实现，区域滚动、下拉刷新、上拉加载更多，效果如图：正常：下拉刷新：
uni-app列表项实现左划操作功能
02-25
在uni-app框架中，我们可以利用其强大的组件化特性来实现丰富的交互效果，比如在列表项上实现左滑操作功能。这种功能常见于很多应用中，如邮件客户端、社交应用等，用户通过左滑可以触发一些快捷操作，如删除、标记...
uni-app——uniapp 中 scroll-view 上下滑动卡顿
qq_43201350的博客
04-05 1825
uni-app——uniapp 中 scroll-view 上下滑动卡顿
uni-app计算scroll-view高度
gcyaozuodashen的博客
07-12 3114
　　 　　　　 　　　　　　 　　　　　　　　内容... 　　　　　　 　　　　 　　
C++中函数调用时的三种参数传递方式详解
qq_23923713的博客
11-28 451
原文地址：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使用scroll-view自动计算剩余高度实现滚动效果
qq_43640535的博客
08-17 2281
uniapp使用scroll-view自动计算剩余高度
uniapp中完美解决scroll-view的动态高度问题
weixin_44953151的博客
07-11 1940
"> 测试高度 -->// 容器高度 = 可使用窗口高度 - 滚动容器距离顶部位置。-- 测试高度会不会影响固定滚动，可以删除 -->label: '测试' + index,// 获取滚动容器css数据。
uni-app中scroll-view的高度
LLL_liuhui的博客
09-04 5500
需要做一个点击弹出列表的模态框，这个列表可以下拉滑动 1、代码 <view @tap="showModal=true">{{form.organizationName}}</view> <view class="moddal" v-if="showModal" @tap="showModal=false"> <view class="moddal-content"> <scroll-view :scroll-top="sc
【uniapp】解决scroll-view滚动视图组件无法自适应高度问题
落叶随风将要去远方，看沿途的风景回忆一场...
11-30 5176
在做前端做页面通常使用的是弹性伸缩布局的，它的好处是，可以达到无缝拼接布局，充分占用剩余的空间布局，但有个滚动视图组件显然无法自适应高度，固定高度那不是自己想要的，现在要实现自适应高度，要怎么处理才好呢。
uniapp scroll-view滚动触底加载 height高度自适应
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
08-30 1993
uniapp 的组件scroll-view在实现触底加载的功能的时候，首先在App上可以滚动，就必须设置高度；触底加载的动态效果，会发起网络请求的，不用设置height，通过css设置min-height:0
uni-app获得scroll-view的高度
12-27
在 uni-app 中，可以通过多种方式来获取 `scroll-view` 的实际渲染高度。一种常见的方式是利用 Vue.js 提供的数据绑定机制以及 UniApp 自带的选择器查询接口。 对于 HTML 部分已经定义好的结构[^1]： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值