uniapp处理IOS底部横条安全区域_uniapp打包ios消除横线

同步

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

结果如下：

使用方式二

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

结果如下：