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.heightbreak;}},onLoad(){},onShow() {},methods:{}}
</script>
<style></style>

结果如下：

使用方式二

<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.heightbreak;}},onLoad(){},onShow() {},methods:{}}
</script>
<style>.contents{background-color: red;position: absolute;width: 100%;height: 10rpx;}
</style>

结果如下：

uniapp处理IOS底部横条安全区域相关推荐

隐藏 ios底部横条HomeIndicator
在RootViewController.mm中添加如下代码 -(BOOL)prefersHomeIndicatorAutoHidden {return YES; }
uniapp小程序—适配ios底部小黑条
适配ios底部小黑条,兼容性给中间内容部分添加:注意前后顺序 padding-bottom: constant(safe-area-inset-bottom); padding-bottom: en ...
小程序自定义导航（适配所有手机包括刘海屏），iPhone8以上机型的底部横条遮挡问题
** 自定义顶部导航 ** 备注:无法实现顶部导航的安卓靠左,IOS居中的现象 1. 隐藏小程序自带的顶部导航在页面的json或app.json中添加(隐藏顶部导航): "navigati ...
微信小程序兼容手机底部横条适配
方法一. 1.采用下面方式进行判断是否有底部横条 let res = wx.getSystemInfoSync(); if (res.model.indexOf('iPhone X') > -1 ...
iphone隐藏底条_iPhone12隐藏底部横条方法 iPhone12怎么隐藏底部小白条
iPhone12怎么隐藏底部小白条?很多iPhone 12用户反馈在看手机或者玩游戏的时候,屏幕底部的小白横条非常碍眼,但是又不知道怎么隐藏掉,所以小编今天整理了下iPhone12隐藏底部横条方法,帮 ...
Unity中实现隐藏iPhoneX底部横条
一:前言我们发布的游戏在iPhoneX之后的机型上默认会一直显示底部的横条,非常影响游戏体验并且不小心就会滑上去二:解决办法勾选上IOS的Player Settings中的Defer syste ...
如何用css适配iphoneX底部横条？！？
当我们在做app或者小程序的时候,如果是自适应屏幕高度,或者是用定位到底部按钮的时候,iphoneX底部的返回横条老是遮挡底部内容,如果巧妙的设计代码,使它能适配到iphoneX呢? 比如我写了一个底 ...
iphone隐藏底条_王者荣耀iPhoneX版底部横条退出怎么解决？如何隐藏home键？
亲爱的召唤师: 我们在2017年11月8日上架了1.31.4.18客户端版本以优化iPhone X机型的游戏体验,各位iPhone X召唤师需要将APP版本号升级为1.31.4.18即可获得最佳游戏体 ...
uni-app 开发 ios底部安全区域(底部白色区域块)
iOS方案:(仅App端支持) manifest.json 文件源码视图 app-plus 节点 safearea 设置背景色 "safearea": { "backg ...

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

同步

异步

使用方式一

使用方式二

uniapp处理IOS底部横条安全区域相关推荐

最新文章

热门文章