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

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

横屏界面代码:

onLoad(option) {
	// #ifdef APP-PLUS
		plus.screen.unlockOrientation();//解除屏幕方向的锁定,但是不一定是竖屏;
		plus.screen.lockOrientation('landscape-primary');
	// #endif
},
onUnload(){
	// #ifdef APP-PLUS
		plus.screen.lockOrientation('portrait-primary'); //锁死屏幕方向为竖屏
	// #endif
},
// 监听页面返回
onBackPress() {
    // 跳转至空白页
	uni.redirectTo({
	    url: 'page/white/white'
    });
    // 阻止界面返回默认操作, 这一步主要是为了防止界面出现异常,uniapp有对onBackPress的详细讲解
    return true;
},

空白页代码:

export default {
    name: 'White',
    data() {
      return {
        
      }
    },
    onLoad() {
      uni.navigateBack()
    },
    methods: {
      
    }
  }

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐