uniapp计算剩余高度相关的坑

爱睡D小猪

已于 2022-03-02 17:49:04 修改

阅读量876

点赞数 1

分类专栏： uniapp 文章标签： vue.js javascript 前端

于 2022-03-02 17:38:06 首次发布

本文链接：https://blog.csdn.net/zhouloverbrother/article/details/123235968

版权

本文介绍了在uni-app中如何通过uni.getSystemInfo获取屏幕真实高度，并考虑原生导航栏和自定义导航栏的情况进行高度适配。在created()生命周期中，开发者减去了460单位的原生导航栏高度（转换为px），以得到可视区域的实际高度，确保内容区域正确布局。

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

1、通过 uni.getSystemInfo获取系统信息

这里用到了windowHeight，如果页面当前存在原生导航栏和原生tabbar底部栏，这里获取的数据是扣除了这两部分的，反之，如果自定义导航栏了，则是全部屏幕的高度，

created() {
   
		 // 获取可视区域的高度
		 uni.getSystemInfo({
   
		 	success: res => {
   
		 	    //460是rpx ，顶部元素的高度
		 		// 因为获取的高度是px，设置的是upx ，需要转换

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

爱睡D小猪

关注关注

1
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【uni-app】动态计算窗口剩余高度

string佳佳的博客

06-09

809

1、同步 uni.getSystemInfo 2、异步 uni.getSystemInfoSync

uni-app 获取页面剩余高度所占手机屏幕的剩余高度

yu_0119的博客

09-03

1702

uniapp 获取页面可用高度 *在created*中 let _this = this; const query = uni.createSelectorQuery().in(this); query .select("#website-list") .boundingClientRect((data) => { console.log("得到布局位置信息" + JSON.stringify(data)); _this.

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

uniapp怎么获取元素高度，获取元素节点信息，获取界面剩余高度

最新发布

A1123352950的博客

09-08

1万+

uniapp获取元素高度，获取元素信息，以及获取页面剩余高度问题的解决方案

uniapp使用scroll-view自动计算剩余高度实现滚动效果

qq_43640535的博客

08-17

2082

uniapp使用scroll-view自动计算剩余高度

小程序中计算剩余页面高度

懒羊羊我小弟的博客

08-13

2017

小程序中计算剩余页面高度在小程序中当我们使用scroll-view组件时需要给设定一个高度，适配屏幕剩余高度，由于没有手机的屏幕尺寸不一样无法给出固定值，这个时候就需要使用到动态计算页面剩余高度。在uniapp中提供了 uni.createSelectQuery() 方法。一、uni.createSelectQuery() 返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点，并使用 boundingClientRect 等方法选择需要查询的信息

uniapp元素高度占据剩余全部空间

weixin_39531049的博客

07-08

1291

uniapp 设置元素占用剩余高度

uni-app如何动态计算窗口的剩余宽度

Gik99的博客

04-16

360

uni-app如何动态计算窗口的剩余宽度

uni-app 顶部导航栏高度计算 + 胶囊高度计算

weixin_45439379的博客

07-02

5753

uni-app 顶部导航栏高度计算 + 胶囊高度计算文章目录uni-app 顶部导航栏高度计算 + 胶囊高度计算uni-app一、顶部导航栏高度计算二、胶囊高度计算总结 uni-app uni-app中使用自定义导航栏 page.json中设置 "navigationStyle": "custom", // 消息模块 { "path": "pages/news/news", "style": { // "navigationBarTitleText": "消息", "en

uniapp如何判断文本超出某行

csdn_chengpeng的博客

03-27

1669

此处需要获取节点元素的高度，所以必须要在mounted中去写。

uniapp实现自定义导航时动态获取导航栏的高度屏幕高度适配

qq_47247479的博客

03-14

5141

App.vue 配置部分 // App.vue export default { methods: { // 获取系统栏高度 setAppInfo() { let that = this; let platform = ''; uni.getSystemInfo({ success: function(e) { Vue.prototype.StatusBar = e.statusBarHeight; // Vue.prototype

uniapp h5端和app端可视区域高度不一样问题

A_Brave的博客

03-17

2725

前言使用uniapp做一个分类列表（左右滚动布局）的时候，发现运行在h5 和app中的视口高度不一样 h5: 100vh-50px = 视口高度 // 底部tabbar栏的默认高度50px, app: 100vh就是视口的高度总结：h5会把底部tabbar算入视口高度，app端不会。 ...

uni-app使用自定义导航，获取顶部距离，兼容各个手机型号

不懂前端的小韩的博客

07-12

4023

uni-app使用自定义导航，获取顶部距离，兼容各个手机型号

uniapp 除去tabBar可视化高度

明耀的博客

01-14

1976

<template> <view :style="{height:windowHeight+'px'}" class="motion"> <uni-segmented-control :values="itemList" styleType="text" /> <view class="map-view"> <map :latitude="37.0152" :longitude="122.52456" /> </view&

Uniapp或者微信小程序如何动态的计算Scrollview的高度

hollebug的博客

08-22

4329

当一个小程序页面，顶部有搜索栏，或者分类查询时，我们想要保证它们能固定到顶部，就需要使用到Scrollview，那么如何确定Scrollview就是一个问题，这时我们可以使用以下代码来实现。先获取Scrollview距离顶部的高度，然后页面高度减去顶部距离，就能得到剩余的内容高度，如果底部还有操作条，那么我们再减去其高度，就能得到具体的Scrollview高度了。注意点是为了能准确的获取到页面元素，从而准确计算高度，我们需要将代码放到onReady生命周期里运行。

uni-app 自定义页面时，如何减去导航栏（状态栏）的高度

PrimaryColor

02-26

5981

html： <template> <view class="page" :style="{'padding-top': statusHeight+'px'}">  </view> </template> js： computed: { //状态栏高度 statusHeight(){ return uni.getSystemInfoSync().statusBarHeight...

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

qq_39236283的博客

03-16

2678

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

如何在uni-app中计算出微信小程序导航栏的高度

热门推荐

qq_35430000的博客

03-21

1万+

为什么要拿到导航栏的高度拿到导航栏的高度当然是为了自定义导航栏，uniapp默认为我们提供了一个导航栏，也就是每个页面上面的标题，但如果对这个默认的导航栏不满意，我们就可以选择自定义导航栏，比如我在下面，为了满足业务需求，放了一个搜索框，取代了原先的标题栏。不仅仅是在导航栏放放东西，如果你要导航栏自定义大背景，也需要自定义导航栏，如下(图片来源网络)：小程序头部的几个参数如果我们要开启页面自义定导航栏，以首页index为例，我们要在pages.json中加入以下代码，它默认是defa

uni-app设置 H5 页面的可视区高度

marllen的博客

04-11

3927

设置当前页面的高度等于屏幕可视区高度 document.documentElement.clientHeight即当前屏幕的可视区高度给最外层content添加动态样式 :style="setHeight" 计算属性,setHeight()方法，返回样式 height: 数值 px 可视区高度，包含了浏览器的状态栏，滚动条等的高度，必要时需要减掉 'height:'+ (document.documentElement.clientHeight - 20) + 'px' <template&gt

uniapp计算scroll-view的剩余高度

那片枫叶~

03-01

1869

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

uniapp view计算剩余高度

05-19

// 计算剩余高度 let remainingHeight = winHeight - pageHeight - componentHeight; }).exec(); }).exec(); ``` 2. 在页面加载完毕后，使用 `uni.createSelectorQuery()` 方法获取当前页面的高度和所有组件的...