uniapp兼容iPhoneX头部状态栏(刘海屏）和底部小横条

@Kacie

已于 2022-07-04 14:01:50 修改

阅读量5.3k

点赞数 4

分类专栏： # uniapp 文章标签：前端

于 2022-06-17 16:44:36 首次发布

本文链接：https://blog.csdn.net/Joye_7y/article/details/125336056

版权

uniapp 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

文章目录

（一）兼容 iphoneX 头部状态栏

使用uni.getSystemInfo()异步获取系统信息
statusBarHeight手机状态栏的高度
详细看官方API介绍

方式一：封装状态栏组件 statusBar.vue

<template>
	<view class="statusBar" :style="{height:(statusBarHeight) + 'px'}"></view>
</template>
<script>
	export default {
        data () {
            return {
                statusBarHeight: ''
            }
        },
        created () {
        	this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
    	}
    }
</script>
<style lang="scss" scoped>
    .statusBar{
        width: 100%;
    }
</style>

将组件放入需要的页面中：

<template>
	<view class="mine-container">
         <!-- statusBar 组件应放在需要用到页面的最前面 -->
		<statusBar></statusBar>
        
		<view class="header-bg">
			<image src="@/static/header_bg.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default{
		data () {
            return {
                statusBarHeight: ''
            }
		},
		onLoad () {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			
		}
	}
</script>

<style lang="scss" scoped>
	.mine-container{
		width: 100%;
		.header-bg{
			width: 100%;
			image{
				width: 100%;
				height: 295rpx;
			}
		}
	}
</style>

效果展示：可以看到顶部白色区域是 statusBar 组件自动识别状态栏的高度，后面的图片会自动往下掉

用方式一时需要将图片占满顶部，可以使用绝对定位，再给图片动态绑定行内样式自动高即可

思路：给图片设计稿的高度加上获取到的状态栏高度，让图片高为自动的

注意：

需要再获取一次设备状态栏高度
这里的 295 只是我图片的设计稿高度（你要根据自己的写）
statusBarHeight 单位是 px，转 rpx 需要乘以 2

<template>
	<view class="mine-container">
		<statusBar></statusBar>
		<view  class="header-bg">
			<image
			 :style="{height:(295 + statusBarHeight*2) + 'rpx'}"
			 src="@/static/header_bg.png" mode=""></image>
		</view>
		<view class="user-info-container">
			<view class="avatar">
				<image src="@/static/avatar.png" mode=""></image>
			</view>
			<view>用户名</view>
		</view>
	</view>
</template>

<script>
	export default{
		data () {
			return{
				statusBarHeight: ''
			}
		},
		onLoad () {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
		}
	}
</script>

<style lang="scss" scoped>
	.mine-container{
		width: 100%;
		.header-bg{
			width: 100%;
			height: auto;
			position: fixed;
			top: 0;
			left: 0;
			z-index: -1;
			image{
				width: 100%;
				// height: 295rpx;
			}
		}
		.user-info-container{
			width: 100%;
			height: 200rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 50rpx;
			margin-top: 25rpx;
			box-sizing: border-box;
			color: white;
			image{
				width: 150rpx;
				height: 150rpx;
				margin-right: 20rpx;
			}
		}
	}
</style>

效果展示：

在这里插入图片描述

方式二：不封装组件

如需要图片占满顶部，给图片动态绑定行内样式，高为设计稿的高度加上获取到的状态栏高度

<template>
	<view class="mine-container">
		<view  class="header-bg">
			<image
			 :style="{height:(295 + statusBarHeight*2) + 'rpx'}" 
			  src="@/static/header_bg.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default{
		data () {
            return {
                statusBarHeight: ''
            }
		},
		onLoad () {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
		}
	}
</script>

<style lang="scss" scoped>
	.mine-container{
		width: 100%;
		.header-bg{
			width: 100%;
            height: auto;
			position: fixed;
			top: 0;
			left: 0;
			z-index: -1;
			image{
				width: 100%;
				// height: 295rpx;
			}
		}
	}
</style>

方式三：使用 Vuex 管理

在根目录中创建结构

├── store                      # 全局store管理
│   └── modules          	   # 模块化
│   │   └── statusBar.js       # 获取状态栏高度模块
│   └── index.js          	   # 状态管理初始化
└── main.js

uniapp 中已经安装了 Vuex，首先引入 vuex 【store/index.js】

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import statusBar from from '@/store/modules/statusBar.js'
const store = new Vuex.Store({
  modules: {
      statusBar
  }
})
export default store

获取状态栏高度模块【store/modules/statusBar.js】

export default {
 state:{
     statusBarHeight: 0,
 },
 mutations: {
     getStatusBarHeight(state) {
         state.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
     }
 }
}

在页面中使用【pages/mine/mine.vue】

<template>
<view class="mine-container">
     <!-- 放置状态栏高度 -->
 	<view :style="{ height: statusBarHeight + 'px' }"></view>
     
     <view  class="header-bg">
   	<image :style="{height:(295 + statusBarHeight*2) + 'rpx'}" src="@/static/header_bg.png" mode=""></image>
   </view>
   <view class="user-info-container">
   	<view class="avatar">
   		<image src="@/static/avatar.png" mode=""></image>
   	</view>
   	<view>用户名</view>
   </view>
 </view>
</template>
<script>
 import { mapState, mapMutations } from 'vuex'
export default{
     computed: {
         ...mapState({
             statusBarHeight: state => state.statusBar.statusBarHeight
         })
     },
     methods: {
         ...mapMutations([
             getStatusBarHeight
         ])
     },
     onload: {
         this.getStatusBarHeight()
     }
 }
</script>
<style lang="scss" scoped>
.mine-container{
   width: 100%;
   .header-bg{
   	width: 100%;
   	height: auto;
   	position: fixed;
   	top: 0;
   	left: 0;
   	z-index: -1;
   	image{
   		width: 100%;
   		// height: 295rpx;
   	}
   }
   .user-info-container{
   	width: 100%;
   	height: 200rpx;
   	display: flex;
   	flex-direction: row;
   	align-items: center;
   	padding: 50rpx;
   	margin-top: 25rpx;
   	box-sizing: border-box;
   	color: white;
   	image{
   		width: 150rpx;
   		height: 150rpx;
   		margin-right: 20rpx;
   	}
   }
}
</style>

完整demo展示：

GitHub: 兼容iphoneX刘海屏(vuex)

（二）兼容 iPhoneX 底部横条

推荐用 css 方式

安全区域距离底部边界距离 env() 跟 constant() 需要同时存在，顺序不能换

<template>
 <view class:"container">
	</view>
</template>

<style lang="scss" scoped>
	.container{
		width: 100%;
		height: 100%;
		padding-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2 
		padding-bottom: env(safe-area-inset-bottom); // 兼容 IOS>11.2 
 }
</style>