uniapp处理IOS底部横条安全区域

最新推荐文章于 2024-12-18 17:25:19 发布

向前有光

最新推荐文章于 2024-12-18 17:25:19 发布

阅读量3.4k

点赞数 2

文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_40666120/article/details/120146117

版权

uni-app 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了uni-app中获取设备系统信息的异步和同步方法，通过`uni.getSystemInfo`和`uni.getSystemInfoSync`在iOS平台上获取安全区域高度，展示了两种不同的应用实例，用于动态设置页面元素样式。在onReady生命周期中，根据平台判断调用相应方法，并解析安全区域信息来调整视图布局。

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

同步

uni.getSystemInfo(OBJECT)

异步

uni.getSystemInfoSync()
在这里插入图片描述

使用方式一

<template>
	<view class="content">
		<view style="background-color: red;" :style="{height:heightOne+'px'}">1</view>
		<view style="background-color: yellow;" :style="{height:heightTwo+'px'}">2</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				heightOne:0,
				heightTwo:0,
			}
		},
		onReady(){
			const self = this;
			
			switch (uni.getSystemInfoSync().platform) {
			    case 'ios':
			        // 异步方式
			        uni.getSystemInfo({
			            success: function (res) {
			        		console.log(res.safeArea)
			        		self.heightOne = res.safeArea.top;//头部区域
			        		self.heightTwo = res.safeArea.height;//内容区域
			            }
			        });
			        
			        //同步方式
			        // self.heightOne.uni.getSystemInfoSync().safeArea.top
			        // self.heightTwo.uni.getSystemInfoSync().safeArea.height
			    break;
			}
		},
		onLoad(){
			
		},
		onShow() {
			
		},
		methods:{
			
		}
	}
</script>
<style>

</style>

结果如下：
![在这里插入图片描述](https://img-blog.csdnimg.cn/ba8257fc6221497b8259571fbceef364.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5ZCR5YmN5pyJ5YWJ,size_20,color_FFFFFF,t_70,g_se,x_16

使用方式二

<template>
	<view class="content">
		<view class="contents" :style="{bottom:heightOne+'px'}">
			
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				heightOne:0,
				heightTwo:0,
			}
		},
		onReady(){
			const self = this;
			
			switch (uni.getSystemInfoSync().platform) {
			    case 'ios':
			        // 异步方式
			        uni.getSystemInfo({
			            success: function (res) {
			        		console.log(res.safeArea)
							let sHeight = res.screenHeight;//获取屏幕高度
							let sTop = res.safeArea.bottom;//获取安全区域底部高度
							self.heightOne = sHeight - sTop;//获取安全区域距离底部的高度
			            }
			        });
			        
			        //同步方式
			        // self.heightOne.uni.getSystemInfoSync().safeArea.top
			        // self.heightTwo.uni.getSystemInfoSync().safeArea.height
			    break;
			}
		},
		onLoad(){
			
		},
		onShow() {
			
		},
		methods:{
			
		}
	}
</script>
<style>
	.contents{
		background-color: red;
		position: absolute;
		width: 100%;
		height: 10rpx;
	}
</style>

结果如下：
在这里插入图片描述