uniapp计算剩余高度相关的坑

爱睡D小猪

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

阅读量796

点赞数 1

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

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

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

版权

uniapp 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

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

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

created() {
		 // 获取可视区域的高度
		 uni.getSystemInfo({
		 	success: res => {
		 	    //460是rpx ，顶部元素的高度
		 		// 因为获取的高度是px，设置的是upx ，需要转换
		 		this.scrollHeight= (res.windowHeight - uni.upx2px(460)) +'px'
				console.log(res.windowHeight,'this.scrollHeight');
				console.log( uni.upx2px(460),' uni.upx2px(460)');
				console.log( this.scrollHeight,' uni.this.scrollHeight(460)');
		 	}
		 });
	},