uniapp横屏切换影响其他页面样式的问题

您所在的位置:网站首页 华为平板竖屏变横屏只有一半 uniapp横屏切换影响其他页面样式的问题

uniapp横屏切换影响其他页面样式的问题

2024-06-22 04:46| 来源: 网络整理| 查看: 265

最近做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