uniapp横屏竖屏的切换及出现的切换出现的样式混乱问题

横屏竖屏之间的切换

updated(){		
  if(this.PageCur=='news'){
        //满足条件转换为横屏
	plus.screen.lockOrientation("landscape-primary");
    }else{
        //否则便会原来的竖屏
	plus.screen.lockOrientation('portrait-primary'); 
  }
},

切换之后会出现样式变大,样式混乱的问题

// 解决跳转横屏竖屏样式放大错乱问题
onBackPress(e) {    
  // 这里可以自定义返回逻辑,比如下面跳转其他页面  
  uni.redirectTo({url: './inedx'})  
  // return true 表示禁止默认返回  
  return true  
},

app从竖屏页面1进入竖屏页面2,再进入横屏,再返回,再返回从新回到竖屏页面1,再次进入竖屏页面2,发现竖屏页面2的所有图片字体都被放大了。再返回竖屏1,再进入竖屏2,一切又恢复正常。

解决:其实就是横竖屏切换之后的 第一个加载的页面样式会错乱,所以需要一个空白的页面来承载这个样式错乱的问题。
在横屏页面返回时,监听onBackPress()使其跳转到一个空白的vue页面,这个空白的vue页面在跳转到自己想去的页面。
这样的话,这个空白vue页面会样式错乱,但不会影响其他页面

posted @   seekHelp  阅读(2266)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示