获取网站访问qq,酒店网站建设报价单,建设工程规划许可证在哪个网站查询,如何加强网站信息管理建设文章目录 问题原因#xff1a;解决方案#xff1a; 今天刚遇到的问题#xff0c;横屏的页面完成操作后跳转页面后#xff0c;自定义的tabbar样式乱了#xff0c;跑到最顶了#xff0c;真机调试后发现navbar跑到手机状态栏了#xff0c;它正常应该跟右边胶囊一行。 知道问… 文章目录 问题原因解决方案 今天刚遇到的问题横屏的页面完成操作后跳转页面后自定义的tabbar样式乱了跑到最顶了真机调试后发现navbar跑到手机状态栏了它正常应该跟右边胶囊一行。 知道问题了就好办了先分析
正常的屏幕显示应该是
竖屏导航栏高度 状态栏高度 44px(内容区)横屏导航栏高度 44px(仅内容区)
问题原因
屏幕旋转时系统信息如状态栏高度会发生变化在横竖屏切换过程中获取系统信息可能存在时序问题导致获取到的状态栏高度不准确
解决方案
监听屏幕旋转事件 wx.onWindowResize通过比较窗口宽高来判断是否横屏windowWidth windowHeight在横屏时将状态栏高度设置为0竖屏时使用系统实际状态栏高度使用 setTimeout 延迟更新导航栏状态确保系统信息已完全更新在组件销毁时记得解绑旋转事件监听器 wx.offWindowResize()
下面是具体custom-navbar组件的代码这里只是适用我的项目应该不是完美的方案有更好的方案欢迎大家沟通
custom-navbar.wxml
view classnavbar-container!-- 导航栏主体 --view classnavbar {{isLandscape ? landscape : }}!-- 状态栏占位 --view classstatus-bar styleheight: {{statusBarHeight}}px/view!-- 导航栏内容 --view classnavbar-contentview classleftview wx:if{{showBack}} classback-icon bind:taponBackt-icon namechevron-left classnav-icon //viewview wx:if{{showHome}} classhome-icon bind:taponGoHomet-icon namehome classnav-icon //view/viewview classcentertext{{title}}/text/viewview classright/view/view/view!-- 占位元素 --view classnavbar-placeholder styleheight: {{isLandscape ? 44 : (44 statusBarHeight)}}px/view
/viewcustom-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}
}
