利用安全区域的概念解决移动端兼容不同手机刘海的问题

、信仰_

已于 2023-08-14 15:42:55 修改

阅读量311

点赞数

分类专栏： uni-app 微信小程序文章标签： typescript javascript 微信小程序 uni-app

于 2023-08-14 15:35:52 首次发布

本文链接：https://blog.csdn.net/sinat_51673411/article/details/132276255

版权

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

在做移动端的项目时，由于不同的手机设备设置的不同，有些手机在上方有刘海的设计，我们需要做适配，即把想要展示的内容放在安全区域内展示。
该图片来源于黑马程序员哔哩哔哩上视频的截图

1.自定义导航栏

在pages.json中修改如下配置

 {
 	"path":"pages/index/index",
 	"style":{
 	 	 "navigationStyle":"custom"
 	    // "navigationBarTitleText": "首页"
	}
 }

2. 通过API 解构出安全区距离手机边界四个方向的距离

const { safeAreaInsets }=uni.getSystemInfoSync()
console.log(safeAreaInsets)

在这里插入图片描述

3. 这样我们就可以拿到安全区距离手机上方的距离了，接下来我们只需要给我们想要展示的页面设置一个上方的padding即可


<view class="navbar :style="{paddingTop:safeAreaInsets?.top+'px'}">  
......
</view>

关注