uniapp横屏切换影响其他页面样式的问题 |
您所在的位置:网站首页 › 华为平板竖屏变横屏只有一半 › uniapp横屏切换影响其他页面样式的问题 |
最近做uniapp时遇到这么一个需求:A页面跳转B页面,B页面是webview,并且要求B页面是横屏显示,退出返回A页面时是竖屏,并且不影响其他页面的样式。 首先是横屏显示:1)在manifest.json里写入: "orientation" : [ "portrait-primary", "portrait-secondary", "landscape-primary", "landscape-secondary" ], 几个的含义官方文档上有解释 2)在B页面锁定横屏 onShow() { setTimeout(function() { plus.screen.lockOrientation('landscape-primary'); }, 500) },3)在A页面解除锁定并且锁定其为竖屏方向 onShow() { var that = this; // #ifdef APP-PLUS plus.screen.unlockOrientation(); //解除屏幕方向的锁定,但是不一定是竖屏; plus.screen.lockOrientation('portrait'); //锁死屏幕方向为竖屏 // #endif },这样进入A页面会变成个横屏,到那时退出来时会遇到问题:其他页面的样式受到影响,在一位童鞋的帮助下找到问题和解决方案,非常感谢这位童鞋。 横屏退出前需要有个过渡页,横屏时一般都超过了1000rpx,直接退出的话会导致其他页面本来宽度只在750rpx左右,直接到了1000,所以会影响样式。 解决方案:B页面返回A页面事件时,跳转一个C页面,C页面的动画等都是0。 我是webview横屏显示,退出时加了个beforedestroy方法,B页面添加跳转空白页代码: beforeDestroy() { uni.navigateTo({ url: '/pages/operation/guodu', animationType: 'none', animationDuration: 0 }) },C页面主要代码: onShow() { var that = this; // #ifdef APP-PLUS plus.screen.unlockOrientation(); //解除屏幕方向的锁定,但是不一定是竖屏; plus.screen.lockOrientation('portrait'); //锁死屏幕方向为竖屏 // #endif console.log('空白页返回') setTimeout(() => { uni.navigateBack({ delta: 1 }) }, 300) },至此,可以解决横屏推出影响样式的问题,再次感谢那位不知名的朋友 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |