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

最新推荐文章于 2025-09-17 17:02:18 发布
原创 最新推荐文章于 2025-09-17 17:02:18 发布 · 7.5k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #vue

本文介绍如何使用uni-app获取设备可见总高度，并通过选择器查询计算除scroll-view外的其他容器高度，实现页面元素自适应布局。
uniapp 获取页面高度及元素高度
weixin_46167462的博客
05-12 6421
获取页面高度及元素高度
uni-app 用scroll-view实现横向滚动
最新发布
qq_36158551的博客
09-20 841
scroll-view是uni-app内置的可滚动视图区域组件，支持横向和纵向滚动配置。适用于商品横向展示、长列表内容展示等需要局部滚动的场景。核心属性：（1）scroll-x：启用横向滚动（2）scroll-y：启用纵向滚动（3）scroll-top：设置竖向滚动位置（4）scroll-left：设置横向滚动位置scroll-view，必须设置：white-space: nowrap;
uniapp使用scroll-view自动计算剩余高度实现滚动效果
qq_43640535的博客
08-17 2307
uniapp使用scroll-view自动计算剩余高度
uniapp计算手机状态栏高度和微信小程序导航栏高度
m0_70265923的博客
07-22 828
【代码】uniapp计算手机状态栏高度和微信小程序导航栏高度。
uniapp点击获取元素高度
weixin_42220130的博客
09-17 294
摘要：uniapp中可通过uni.createSelectorQuery()获取元素高度。示例代码展示了如何点击按钮获取.target-box元素的高度：使用.select()选择元素，调用.boundingClientRect()获取尺寸信息，将高度保存到data中并显示。核心方法是创建选择器查询并执行exec()，回调函数中通过res.height获取实际高度值。
//调用uni-app接口获取屏幕高度
m0_58358831的博客
11-03 1291
【代码】//调用uni-app接口获取屏幕高度。
uniapp 获取手机屏幕高度
cjy_fly的博客
11-30 593
uniapp 获取手机屏幕高度
uni-app(vue3)动态获取swiper的区域高度以及通过scroll-view实现区域滚动和scroll-view的置顶功能
qq_39691676的博客
04-28 1074
计算方式:swiper高度 = page高度 - tabs高度 - search高度。
小程序-uni-app：scroll-view/区域滚动、下拉刷新、上拉加载更多
snow的博客
07-24 7231
开发环境：小程序、uniapp + vue3 + ts实现功能：列表页面实现，区域滚动、下拉刷新、上拉加载更多，效果如图：正常：下拉刷新：
精选资源
uni-app列表项实现左划操作功能
02-25
在uni-app框架中，我们可以利用其强大的组件化特性来实现丰富的交互效果，比如在列表项上实现左滑操作功能。这种功能常见于很多应用中，如邮件客户端、社交应用等，用户通过左滑可以触发一些快捷操作，如删除、标记...
精选资源
基于uni-app开发的新闻和资讯类App模板
02-22
6. **响应式布局**：uni-app支持Flexbox布局，可以实现自适应不同设备屏幕大小的设计，保证在不同设备上的良好显示效果。 7. **性能优化**：通过懒加载、预加载等技术，优化图片加载速度，提高用户体验。同时，合理...
uniapp 动态获取手机屏幕高度
weixin_44325832的博客
04-13 2937
动态获取元素高度
uniapp 获取屏幕高度
我的博客
04-25 4156
onLoad () { uni.getSystemInfo({ success: (res) => { // 注意这里获得的高度宽度都是px，需要转换rpx console.log(res.screenHeight); // 屏幕高度，包含导航栏 console.log(res.screenWidth); // 屏幕宽度 console.log(res.windowHeight); // 可使用窗口高度，不包...
uniAPP—动态获取一屏的高度
m0_38007556的博客
08-09 1346
【代码】uniAPP—动态获取一屏的高度。
uni-app计算scroll-view高度
gcyaozuodashen的博客
07-12 3133
　　 　　　　 　　　　　　 　　　　　　　　内容... 　　　　　　 　　　　 　　
uniapp定义sroll-view的高度
A3216556874的博客
10-31 454
/tab切换 到顶部的距离。//获取页面屏幕的高度。
uniapp获取手机屏幕高度
seimeii的博客
03-27 1131
//获取屏幕可视区域高度 onReady() { uni.getSystemInfo({ success: function (res) { console.log(res.windowHeight) } }) },
高度自适应scroll-view，uniapp项目
Frank_colo的博客
01-13 919
【代码】高度自适应scroll-view。
uniapp获取手机屏幕的高度
peijiajing的博客
11-05 2026
uni.getSystemInfo({ success: res => { this.hei = res.windowHeight; } });
uni-app获得scroll-view的高度
12-27
### 获取 `scroll-view` 组件高度的方法 在 uni-app 中，可以通过多种方式来获取 `scroll-view` 的实际渲染高度。一种常见的方式是利用 Vue.js 提供的数据绑定机制以及 UniApp 自带的选择器查询接口。 对于 HTML 部分已经定义好的结构[^1]： ```html <template> <view :style="{ height: scrollHeight + 'px' }"> <view class="swiper-item"> <scroll-view scroll-y style="height: 100%; width: 100%;" lower-threshold="50" > <view class="card">内容...</view> </scroll-view> </view> </view> </template> ``` 为了动态调整或读取 `scroll-view` 的尺寸，在 JavaScript (Vue) 方法中可以这样做: ```javascript export default { data() { return { scrollHeight: 0, // 初始设置为零 }; }, mounted() { // 使用生命周期钩子函数mounted确保DOM已加载完成 this.getScrollViewHeight(); }, methods: { getScrollViewHeight() { const query = uni.createSelectorQuery().in(this); query.select('.swiper-item').boundingClientRect(data => { if (data) { console.log('scrollView Height:', data.height); // 打印日志用于调试目的 this.scrollHeight = data.height; } }).exec(); // exec方法执行所有的select操作并返回结果 } } } ``` 此代码片段展示了如何通过 `uni.createSelectorQuery()` 创建一个选择器查询对象，并调用 `.select()` 来定位目标节点（这里是指定类名的元素）。一旦获得了该元素的信息，则可以直接访问其属性如宽度 (`width`) 和高度 (`height`) 等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值