這里給大家分享我在網(wǎng)上總結(jié)出來的一些知識，希望對大家有所幫助
前言
大家好，今天聊一下在做uniapp多端適配項(xiàng)目，需要用到自定義導(dǎo)航時(shí)，如何解決狀態(tài)欄塌陷及導(dǎo)航欄安全區(qū)域多端適配問題，下文只針對H5、APP、微信小程序三端進(jìn)行適配，通過封裝一個(gè)通用高階組件包裹自定義導(dǎo)航欄內(nèi)容，主要是通過設(shè)置padding來使內(nèi)容始終保持在安全區(qū)域，達(dá)到低耦合，可復(fù)用性強(qiáng)的效果。
一、創(chuàng)建NavbarWrapper.vue組件
大致結(jié)構(gòu)如下：
<template>
<view class="navbar-wrapper" :style="{
paddingTop: statusBarHeight,
paddingRight: rightSafeArea
}">
<slot/>
</view>
</template>
<script>
export default {
name: 'NavbarWrapper',
data() {
return {
// 像素單位
pxUnit: 'px',
// 默認(rèn)狀態(tài)欄高度
statusBarHeight: 'var(--status-bar-height)',
// 微信小程序右上角的膠囊菜單寬度
rightSafeArea: 0
}
}
}
</script>
<style scoped>
.navbar-wrapper {
/**
* 元素的寬度和高度包括了內(nèi)邊距（padding）和邊框（border），
* 而不會被它們所占據(jù)的空間所影響
* 子元素繼承寬度時(shí),只會繼承內(nèi)容區(qū)域的寬度
*/
box-sizing: border-box;
}
</style>
目的
主要是動態(tài)計(jì)算statusBarHeight和rightSafeArea的值。
解決方案
在APP端只需一行css代碼即可
.navbar-wrapper {
padding-top: var(--status-bar-height);
}
下面是關(guān)于--status-bar-height變量的介紹：
從上圖可以知道--status-bar-height只在APP端是手機(jī)實(shí)際狀態(tài)欄高度，在微信小程序是固定的25px，并不是手機(jī)實(shí)際狀態(tài)欄高度;
在微信小程序時(shí)，除了狀態(tài)欄高度還需要獲取右上角的膠囊菜單所占寬度，保持導(dǎo)航欄在安全區(qū)域。
以下使用uni.getWindowInfo()和uni.getMenuButtonBoundingClientRect()來分別獲取狀態(tài)欄高度和膠囊相關(guān)信息，api介紹如下圖所示：
主要邏輯代碼
在NavbarWrapper組件創(chuàng)建時(shí)，做相關(guān)計(jì)算
created() {
const px = this.pxUnit
// #ifndef H5
// 獲取窗口信息
const windowInfo = uni.getWindowInfo()
this.statusBarHeight = windowInfo.statusBarHeight + px
// #endif
// #ifdef MP-WEIXIN
// 獲取膠囊左邊界坐標(biāo)
const { left } = uni.getMenuButtonBoundingClientRect()
// 計(jì)算膠囊(包括右邊距)占據(jù)屏幕的總寬度：屏幕寬度-膠囊左邊界坐標(biāo)
this.rightSafeArea = windowInfo.windowWidth - left + px
// #endif
}
用法
<NavbarWrapper> <view class="header">header</view> </NavbarWrapper>
二、多端效果展示
微信小程序
APP端
H5端
文章來源：http://www.zghlxwxcb.cn/news/detail-749675.html
三、源碼
NavbarWrapper.vue
<template>
<view class="navbar-wrapper" :style="{
paddingTop: statusBarHeight,
paddingRight: rightSafeArea
}">
<slot/>
</view>
</template>
<script>
export default {
name: 'NavbarWrapper',
data() {
return {
// 像素單位
pxUnit: 'px',
// 默認(rèn)狀態(tài)欄高度
statusBarHeight: 'var(--status-bar-height)',
// 微信小程序右上角的膠囊菜單寬度
rightSafeArea: 0
}
},
created() {
const px = this.pxUnit
// #ifndef H5
// 獲取窗口信息
const windowInfo = uni.getWindowInfo()
this.statusBarHeight = windowInfo.statusBarHeight + px
// #endif
// #ifdef MP-WEIXIN
// 獲取膠囊左邊界坐標(biāo)
const { left } = uni.getMenuButtonBoundingClientRect()
// 計(jì)算膠囊(包括右邊距)占據(jù)屏幕的總寬度：屏幕寬度-膠囊左邊界坐標(biāo)
this.rightSafeArea = windowInfo.windowWidth - left + px
// #endif
}
}
</script>
<style scoped>
.navbar-wrapper {
/**
* 元素的寬度和高度包括了內(nèi)邊距（padding）和邊框（border），
* 而不會被它們所占據(jù)的空間所影響
* 子元素繼承寬度時(shí),只會繼承內(nèi)容區(qū)域的寬度
*/
box-sizing: border-box;
background-color: deeppink;
}
</style>
本文轉(zhuǎn)載于:
https://juejin.cn/post/7309361597556719679
如果對您有所幫助，歡迎您點(diǎn)個(gè)關(guān)注，我會定時(shí)更新技術(shù)文檔，大家一起討論學(xué)習(xí)，一起進(jìn)步。
?
文章來源地址http://www.zghlxwxcb.cn/news/detail-749675.html
到了這里，關(guān)于記錄--優(yōu)雅解決uniapp微信小程序右上角膠囊菜單覆蓋問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
