101 lines
2.2 KiB
Markdown
101 lines
2.2 KiB
Markdown
## 白屏问题
|
||
|
||
环境：
|
||
|
||
- 浏览器：Chrome56
|
||
- Unibest：快速开发框架，官网：https://unibest.tech/
|
||
|
||
出现白屏参考上面的方案。
|
||
|
||
使用的是 Vscode 模板的话，直接参考
|
||
|
||
使用的是 Hbuilderx 模板的话，在根目录下添加`vite.config.js`文件
|
||
|
||
```js
|
||
import Uni from '@dcloudio/vite-plugin-uni'
|
||
import legacy from '@vitejs/plugin-legacy'
|
||
import { defineConfig } from 'vite'
|
||
|
||
export default defineConfig({
|
||
plugins: [
|
||
uni(),
|
||
legacyPlugin({
|
||
// 配置参考上面的 md 文件
|
||
})
|
||
]
|
||
})
|
||
```
|
||
|
||
## 原生Tabbar遮挡
|
||
|
||
如果Uniapp原生的Tabbar会遮挡一部分内容，这是因为部分低版本浏览器可能不支持 `env` 计算函数，所以导致整个样式设置失效。
|
||
|
||
**解决方案：**
|
||
|
||
新建 `/hooks/useSafeAreaBottom` 文件夹
|
||
|
||
在该目录下新建 `index.ts` 和 `index.css` 文件，添加一下内容
|
||
`index.css`：
|
||
|
||
```css
|
||
.safe-area-bottom {
|
||
padding-bottom: 50px;
|
||
padding-bottom: calc(50px + constant(safe-area-inset-bottom));
|
||
padding-bottom: calc(50px + env(safe-area-inset-bottom));
|
||
}
|
||
// 设置为50px是因为Uniapp的tabber的高度固定为50px。
|
||
```
|
||
|
||
`index.ts`：
|
||
|
||
```ts
|
||
import './index.css'
|
||
|
||
export function useSafeAreaBottom(): {
|
||
safeAreaInsets: UniApp.GetSystemInfoResult['safeAreaInsets']
|
||
needSafeAreaBottom: boolean
|
||
} {
|
||
const systemInfo = uni.getSystemInfoSync()
|
||
|
||
const safeAreaInsets: UniApp.GetSystemInfoResult['safeAreaInsets']
|
||
= systemInfo.safeAreaInsets ?? {
|
||
top: 0,
|
||
bottom: 0,
|
||
left: 0,
|
||
right: 0,
|
||
}
|
||
|
||
// ✅ 仅检测是否支持 env(safe-area-inset-bottom)
|
||
const supportsEnv
|
||
= typeof window !== 'undefined'
|
||
&& 'CSS' in window
|
||
&& typeof CSS.supports === 'function'
|
||
&& CSS.supports('padding-bottom', 'env(safe-area-inset-bottom)')
|
||
|
||
const needSafeAreaBottom = !supportsEnv
|
||
|
||
return {
|
||
safeAreaInsets,
|
||
needSafeAreaBottom,
|
||
}
|
||
}
|
||
```
|
||
|
||
使用：
|
||
|
||
```html
|
||
<template>
|
||
<view
|
||
:class="{ 'safe-area-bottom': needSafeAreaBottom }"
|
||
:style="{ marginTop: safeAreaInsets.top + 'px' }"
|
||
>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { useSafeAreaBottom } from '@/hooks/useSafeAreaBottom/index'
|
||
|
||
const { safeAreaInsets, needSafeAreaBottom } = useSafeAreaBottom()
|
||
</script>
|
||
```
|