最近做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)
},
至此,可以解决横屏推出影响样式的问题,再次感谢那位不知名的朋友