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)
		},

至此,可以解决横屏推出影响样式的问题,再次感谢那位不知名的朋友

  • 6
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值