首页
归档
笔记
树洞
搜索
友言

文章详情

Interesting People Record Interesting.

/ uniapp / 文章详情

uniapp隐藏iphoneX底部安全区

Sonder
2021-08-13
758字
2分钟
浏览 (5.5k)

一、在manifest.json里面加以下代码:

复制代码
"safearea": {
   "bottom": {
       "offset": "none"
   }
},
image.png

一、判断全面屏

复制代码
<view class="tabbar" :style="{ 'padding-bottom': paddingBottomHeight + 'rpx' }">

</view>
复制代码
//判断是不是全面屏
let that = this;
uni.getSystemInfo({
 success: function(res) {
   let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
   model.forEach(item => {
     //适配iphoneX以上的底部,给tabbar一定高度的padding-bottom
     if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
       that.paddingBottomHeight = 0;
     }
   });
 },
});

二、给没有底部导航栏的加CSS样式

复制代码
padding-bottom: 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
image.png

三、结果样式:

image.png
没加之前

image.png
加了之后

下一篇 / vue组件无亲属关系调用方法

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)