今天剛遇到的問題，橫屏的頁面完成操作后跳轉頁面后，自定義的tabbar樣式亂了，跑到最頂了，真機調試后發現navbar跑到手機狀態欄了，它正常應該跟右邊膠囊一行。

知道問題了就好辦了，先分析

正常的屏幕顯示應該是：

• 豎屏：導航欄高度 = 狀態欄高度 + 44px(內容區)
• 橫屏：導航欄高度 = 44px(僅內容區)

問題原因：

• 屏幕旋轉時，系統信息（如狀態欄高度）會發生變化
• 在橫豎屏切換過程中，獲取系統信息可能存在時序問題，導致獲取到的狀態欄高度不準確

解決方案：

• 監聽屏幕旋轉事件 wx.onWindowResize
• 通過比較窗口寬高來判斷是否橫屏：windowWidth > windowHeight
• 在橫屏時將狀態欄高度設置為0，豎屏時使用系統實際狀態欄高度
• 使用 setTimeout 延遲更新導航欄狀態，確保系統信息已完全更新
• 在組件銷毀時，記得解綁旋轉事件監聽器 wx.offWindowResize()

下面是具體custom-navbar組件的代碼，這里只是適用我的項目，應該不是完美的方案，有更好的方案歡迎大家溝通

custom-navbar.wxml

<view class="navbar-container"><!-- 導航欄主體 --><view class="navbar {{isLandscape ? 'landscape' : ''}}"><!-- 狀態欄占位 --><view class="status-bar" style="height: {{statusBarHeight}}px"></view><!-- 導航欄內容 --><view class="navbar-content"><view class="left"><view wx:if="{{showBack}}" class="back-icon" bind:tap="onBack"><t-icon name="chevron-left" class="nav-icon" /></view><view wx:if="{{showHome}}" class="home-icon" bind:tap="onGoHome"><t-icon name="home" class="nav-icon" /></view></view><view class="center"><text>{{title}}</text></view><view class="right"></view></view></view><!-- 占位元素 --><view class="navbar-placeholder" style="height: {{isLandscape ? 44 : (44 + statusBarHeight)}}px"></view>
</view>

---

custom-navbar.wxss

.navbar-container {width: 100%;position: relative;z-index: 999;
}.navbar {position: fixed;top: 0;left: 0;width: 100%;background: #fff;z-index: 999;box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}.status-bar {width: 100%;background: #fff;
}.navbar-content {height: 44px;display: flex;align-items: center;padding: 0 12px;position: relative;background: #fff;
}.left {display: flex;align-items: center;min-width: 90px;position: relative;z-index: 2;
}.back-icon, .home-icon {padding: 6px;display: flex;align-items: center;justify-content: center;
}.back-icon .nav-icon {font-size: 50rpx;
}.home-icon .nav-icon {font-size: 40rpx;
}.icon-image {width: 24px;height: 24px;
}.center {flex: 1;text-align: center;font-size: 17px;font-weight: 500;color: #000;position: absolute;left: 0;right: 0;z-index: 1;height: 44px;line-height: 44px;
}.right {min-width: 90px;position: relative;z-index: 2;
}/* 導航欄占位元素 */
.navbar-placeholder {width: 100%;background: transparent;
}/* 為使用自定義導航欄的頁面提供的全局樣式類 */
.with-custom-navbar {padding-top: env(safe-area-inset-top);min-height: 100vh;box-sizing: border-box;background: #f5f5f5;
}/* 橫屏模式樣式 */
.navbar.landscape {position: fixed;top: 0;left: 0;width: 100vw;height: 44px;padding: 0;margin: 0;
}.navbar.landscape .status-bar {display: none;
}.navbar.landscape .navbar-content {height: 44px;padding: 0 8px;margin: 0;
}.navbar.landscape .back-icon .nav-icon {font-size: 32rpx;
}.navbar.landscape .home-icon .nav-icon {font-size: 28rpx;
}.navbar.landscape .center {font-size: 14px;height: 44px;line-height: 44px;
}.navbar.landscape .back-icon,
.navbar.landscape .home-icon {padding: 4px;
} 

---

custom-navbar.js

Component({properties: {// 標題title: {type: String,value: ''},// 是否顯示返回按鈕showBack: {type: Boolean,value: true},// 是否顯示首頁按鈕showHome: {type: Boolean,value: true},// 首頁路徑homePath: {type: String,value: '/pages/index/index'}},data: {statusBarHeight: 0,isLandscape: false},lifetimes: {attached() {this.updateNavBarStatus();// 監聽屏幕旋轉wx.onWindowResize((res) => {const { windowWidth, windowHeight } = res.size;const newIsLandscape = windowWidth > windowHeight;if (this.data.isLandscape !== newIsLandscape) {// 延遲一下更新，確保系統信息已經更新setTimeout(() => {this.updateNavBarStatus();}, 100);}});},detached() {wx.offWindowResize();}},methods: {// 更新導航欄狀態updateNavBarStatus() {try {const systemInfo = wx.getSystemInfoSync();const isLandscape = systemInfo.windowWidth > systemInfo.windowHeight;console.log('系統信息：', systemInfo);console.log('是否橫屏：', isLandscape);console.log('狀態欄高度：', systemInfo.statusBarHeight);this.setData({isLandscape: isLandscape,statusBarHeight: isLandscape ? 0 : (systemInfo.statusBarHeight || 48)});} catch (error) {console.error('獲取系統信息失敗：', error);// 設置默認值this.setData({statusBarHeight: 48});}},// 返回上一頁onBack() {const pages = getCurrentPages();if (pages.length > 1) {wx.navigateBack();} else {wx.reLaunch({url: this.data.homePath});}this.triggerEvent('back');},// 返回首頁onGoHome() {wx.reLaunch({url: '/pages/index/index',});this.triggerEvent('home');}}
}); 

custom-navbar.json

{"component": true,"usingComponents": {"t-navbar": "tdesign-miniprogram/navbar/navbar","t-icon": "tdesign-miniprogram/icon/icon"}
}