uni-app vivo X9 设置底部安全距离属性时vivo x9 tab栏失效，小米苹果等机型无问题

uni-app vivo X9 设置底部安全距离属性时vivo x9 tab栏失效，小米苹果等机型无问题

开发环境 版本号 项目创建方式
Windows windows 10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：windows 10

HBuilderX类型：Alpha

HBuilderX版本号：3.0.4

手机系统：Android

手机系统版本号：Android 6.0

手机厂商：vivo

手机机型：x9

页面类型：vue

打包方式：云端

项目创建方式：HBuilderX

操作步骤：

```css
.scp-tab-bar {
width: 100%;
height: calc(120rpx + env(safe-area-inset-bottom));
background-color: transparent;
}
.tabbar-container {
position: fixed;
// bottom: 0;
bottom: constant(safe-area-inset-bottom);
bottom: env(safe-area-inset-bottom);
z-index: 999;
width: 100%;
height: 120rpx;
background-color: #f6f6f6;
border-top: 1px solid #ccc;
// box-shadow: 0px 15px 20px #000000;
}
.tabbar-item {
position: relative;
color: #7A7E83;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
flex: 1;

.scp-icon {
font-size: 50rpx;
height: 50rpx;
line-height: 50rpx;
&.shequ {
font-size: 44rpx;
}
}

&.active {
color: #269C78;
}

.large {
width: 130rpx;
height: 130rpx;
border-radius: 130rpx;
position: absolute;
background: #f6f6f6;
left: 50%;
top: 0;
transform: translate(-50%, -50%);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
// box-shadow: 0px -4px 10px -8px #000000;

.icon-container {
width: 114rpx;
height: 114rpx;
border-radius: 114rpx;
background-color: $-color-active-press;
display: flex;
align-items: center;
justify-content: center;
}

.scp-icon {
font-size: 1.4rem;
height: 1.4rem;
line-height: 1.4rem;
}
}

.tabbar-text {
margin-top: 6rpx;
font-size: 30rpx;
}

.tabbar-badge {
color: $-color-font;
position: absolute;
right: 10rpx;
top: 10rpx;
background: red;
text-align: center;
font-size: 0.6rem;

&.large-badge {
// top: 40rpx;
}

&.text {
width: 35rpx;
height: 35rpx;
line-height: 35rpx;
border-radius: 35rpx;
}

&.dot {
width: 20rpx;
height: 20rpx;
line-height: 20rpx;
border-radius: 20rpx;
}
}
}
.image-icon {
width: 24px;
height: 24px;
image {
width: 100%;
height: 100%;
}
}
.safa-area {
position: fixed;
bottom: 0;
width: 100%;
height: constant(safe-area-inset-bottom);
height: env(safe-area-inset-bottom);
background-color: #f6f6f6;
}

预期结果： Tabber显示无异常

实际结果： vivo x9 tabber失踪

bug描述： 为了适配iponeX系列上的虚拟条，设置了自定义tabbar ，样式如下，自己测试过的机型有小米9，红米，ipone6及iponex，底部的虚拟条都自己空出来了，但是vivox9的手机，底部的tabbar失踪，都没有显示出来

我是通过在自定组组件tabbar中设置一个view元素，他的高度就是 height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom); 然后使tabber的定位距离底部的距离也空出这么多


更多关于uni-app vivo X9 设置底部安全距离属性时vivo x9 tab栏失效，小米苹果等机型无问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

找到原因了，就是安卓6及以下的手机貌似是没有constant(safe-area-inset-bottom);这种属性的，就设置检测到是安卓6或者是以下的时候，设置成固定高度就好了

更多关于uni-app vivo X9 设置底部安全距离属性时vivo x9 tab栏失效，小米苹果等机型无问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个vivo X9机型特有的兼容性问题。根据你的描述，问题出在safe-area-inset-bottom属性在vivo X9上不被支持或识别。

建议解决方案：

  1. 首先添加机型判断，针对vivo X9做特殊处理：
const systemInfo = uni.getSystemInfoSync();
const isVivoX9 = systemInfo.model.includes('vivo X9');
  1. 修改CSS，为vivo X9设置固定高度：
.tabbar-container {
  position: fixed;
  bottom: 0;
  /* 其他通用样式 */
}
/* 针对非vivo X9的机型 */
:not(.vivo-x9) .tabbar-container {
  bottom: constant(safe-area-inset-bottom);
  bottom: env(safe-area-inset-bottom);
}
  1. 在模板中动态添加类名：
<view class="tabbar-container" :class="{'vivo-x9': isVivoX9}">
  <!-- tabbar内容 -->
</view>
  1. 对于安全区域占位元素，同样需要做条件判断：
.safa-area {
  height: 0;
}
:not(.vivo-x9) .safa-area {
  height: constant(safe-area-inset-bottom);
  height: env(safe-area-inset-bottom);
}
回到顶部