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

文章目录

（一）兼容 iphoneX 头部状态栏
- 方式一：封装状态栏组件 statusBar.vue
- 方式二：不封装组件
- 方式三：使用 Vuex 管理
- 完整demo展示：
（二）兼容 iPhoneX 底部横条

（一）兼容 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>

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

如何用CSS适配iPhoneX底部小横条
如何用CSS适配iPhoneX底部小横条前言 iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理 ...
css constant() env()设置iphoneX等机型刘海屏、底部小黑条自动留白设置安全区域与边界的距离
iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量: safe-area-inset-left:安全区域距离左边边界距离 safe-area-i ...
自定义底部导航条刘海机型屏幕出现黑色横条遮挡问题，适配ihone x，ihone 11 和12的机型
自定义底部导航条刘海机型屏幕出现黑色横条遮挡问题,适配ihone x,ihone 11 和12的机型修改前情况修改后情况打开项目文件 app.vueapp.vue1.增加全局参数 globalD ...
【uni-app】解决iPhone X “刘海屏”兼容性问题
开发微信小程序时设置为自定义导航,在iPhone X这种有刘海屏的手机中预览会发现自定义导航与"刘海"之间的距离对比原生导航有些差异,用户体验不是很好. 这里可以使用uni.get ...
uni-app - 检查机型是否为刘海屏（如iPhone X）
前言有时候,普通机型的界面,到刘海屏上就会有问题,尤其是顶部最容易出问题. 如果知道了是否是刘海屏,那么我们可以动态设置一些 css 属性,来兼容样式. 实现利用 5+ API 可查询当前设备是否 ...
小程序兼容iphoneX（齐刘海）代码，mpvue的写法
好像写了这个代码就兼容iphoneX以上,这段代码只写了底部,顶部其实也一样 1.main.js 在该文件定义一个全局的globalData Vue.prototype.globalData = ge ...
【小程序与公众号】如何判断刘海屏手机（小程序/小游戏）
以小游戏为示范,代码如下: // 市面上已知的刘海屏机型(不全)fringeScreenModels: ["iPhone X", "iPhone x", &qu ...
如何适配处理iphoneX底部的横条？(转)
iphoneX手机取消了实体Home键,取而代之的是主界面底部不显眼的横条"Home Indicator".当网页底部fixed 元素时候,一部分元素可能就被这个横条遮挡住,怎么适 ...
如何适配处理iphoneX底部的横条 - ios
iphoneX手机取消了实体Home键,取而代之的是主界面底部不显眼的横条"Home Indicator".当网页底部fixed 元素时候,一部分元素可能就被这个横条遮挡住,怎么适 ...