/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);
}
Nine_developer
- 发布：2021-11-16 11:56
- 更新：2021-11-16 11:56
- 阅读：478
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： windows 10
HBuilderX类型： 正式
HBuilderX版本号： 3.2.12
手机系统： Android
手机系统版本号： Android 10
手机厂商： 华为
手机机型： oppo
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
/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);
}
/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;
}
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没有效果。
