当前位置: 首页 > news >正文

微信小程序横屏页面跳转后,自定义navbar样式跑了?

文章目录

      • 问题原因:
      • 解决方案:

今天刚遇到的问题,横屏的页面完成操作后跳转页面后,自定义的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"}
} 
http://www.lryc.cn/news/503787.html

相关文章:

  • 回归预测 | MATLAB实现BiGRU(双向门控循环单元)多输入单输出
  • 智能时代的基石:神经网络
  • 红与黑,,
  • 嵌入式驱动开发详解16(音频驱动开发)
  • 【嵌入式软件】跑开发板的前置服务配置
  • 如何高效实现进程间通信
  • scala基础学习_变量
  • Java 身份证校验工具类(15位校验、18位校验与15转18)
  • HTML+CSS+Vue3的静态网页,免费开源,可当作作业使用
  • 【FAQ】HarmonyOS SDK 闭源开放能力 —Push Kit(8)
  • HCIA-Access V2.5_2_2_2网络通信基础_IP编址与路由
  • 音频客观测评方法PESQ
  • 前后端分离的项目使用nginx 解决 Invalid CORS request
  • 回归预测 | MATLAB实现SVM-Adaboost集成学习结合支持向量机多输入单输出回归预测
  • 常见排序算法总结 (五) - 堆排序与堆操作
  • kubernetes的三种探针ReadinessProbe、LivenessProbe和StartupProbe,以及使用示例
  • 掌握线性回归:从简单模型到多项式模型的综合指南
  • Java:183 基于SSM的高校食堂系统
  • 光谱相机
  • AI绘图:开源Stable Diffusion 3 ComfyUI下载安装方法
  • 一区向量加权算法优化INFO-CNN-SVM卷积神经网络结合支持向量机多特征分类预测
  • AES笔记整理
  • Jmeter 性能压测-Tomcat连接数
  • 基于Vue3的组件封装技巧分享
  • python中r代表什么意思
  • 《量子计算对人工智能发展的深远影响》
  • 12.2【JAVA EXP4]next.js的各种问题,DEBUG,前端补强,前后端交互,springSecurity ,java 配置,h2数据库
  • docker启动一个helloworld(公司内网服务器)
  • 使用 Netty 实现 RPC 通信框架
  • 【机器学习06--贝叶斯分类器】