uni-app HBuilder X 3.2.12.20211029 设置tabbar悬浮在H5有效在app端无效

示例代码：

/deep/ uni-tabbar .uni-tabbar {  
    width: 700rpx;  
    border-radius: 19.04rpx;  
    bottom: calc(var(--window-bottom) + 30px) !important;  
    box-shadow: 0 0 47.61rpx rgba(0, 0, 0, 0.12);  
}

操作步骤：

/deep/ uni-tabbar .uni-tabbar {  
    width: 700rpx;  
    border-radius: 19.04rpx;  
    bottom: calc(var(--window-bottom) + 30px) !important;  
    box-shadow: 0 0 47.61rpx rgba(0, 0, 0, 0.12);  
}

预期结果：

/deep/ uni-tabbar .uni-tabbar {  
    width: 700rpx;  
    border-radius: 19.04rpx;  
    bottom: calc(var(--window-bottom) + 30px) !important;  
    box-shadow: 0 0 47.61rpx rgba(0, 0, 0, 0.12);  
}

实际结果：

 uni-tabbar .uni-tabbar {  
    bottom: 0;  
}

bug描述：

在page.json文件使用tabbar，在app.vue入口文件使用bottom: calc(var(--window-bottom) + 20px)使tabbar悬浮于页面，css代码如下：

/deep/ uni-tabbar .uni-tabbar {  
    width: 700rpx;  
    border-radius: 19.04rpx;  
    bottom: calc(var(--window-bottom) + 30px) !important;  
    box-shadow: 0 0 47.61rpx rgba(0, 0, 0, 0.12);  
}

在H5端内置浏览器可以看到效果，在手机调试app没有效果。

更多关于uni-app HBuilder X 3.2.12.20211029 设置tabbar悬浮在H5有效在app端无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

vueper 1楼

更多关于uni-app HBuilder X 3.2.12.20211029 设置tabbar悬浮在H5有效在app端无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

这是一个跨端兼容性问题。在uni-app中，H5端和App端（特别是iOS和Android原生渲染）的tabbar实现机制不同。

H5端的tabbar是纯CSS实现的，所以可以通过CSS修改样式和位置。但在App端，tabbar是原生控件，其位置和样式由原生代码控制，CSS对原生tabbar的样式修改是无效的。

对于App端实现悬浮tabbar效果，建议使用以下方案：

隐藏原生tabbar，使用自定义组件替代 在pages.json中设置tabbar为自定义模式：

{
  "tabBar": {
    "custom": true,
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [...]
  }
}

创建自定义tabbar组件 在项目根目录创建custom-tab-bar目录，添加index.vue组件，使用fixed定位实现悬浮效果：

<template>
  <view class="custom-tab-bar" :style="{bottom: bottom + 'px'}">
    <!-- 自定义tabbar内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      bottom: 30 // 悬浮高度
    }
  }
}
</script>

<style>
.custom-tab-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 700rpx;
  border-radius: 19.04rpx;
  box-shadow: 0 0 47.61rpx rgba(0, 0, 0, 0.12);
  z-index: 999;
}
</style>

处理安全区域 对于全面屏手机，需要考虑安全区域：