uniapp app横屏竖屏问题导致样式紊乱
最近做了一个点击签名然后要让app自动横屏的功能,此功能难点在于退出横屏的时候,会导致竖屏的页面紊乱。
首先如果要让app横屏,要先在manifest.json的源码视图app-plus里添加"flexible": true,表示app可以横竖切换
然后在想要横屏的页面里加上
onShow() { uni.showLoading({ title: "加载中..." }) setTimeout(() => { plus.screen.unlockOrientation(); plus.screen.lockOrientation('landscape-primary'); uni.hideLoading(); }, 1200) }, //页面卸载时切换为竖屏配置 onUnload() { plus.screen.lockOrientation('portrait-primary'); //锁死屏幕方向为竖屏 },
此段代码,此时进入此页面就会横屏离开就会变成竖屏
写此功能时发现有bug,当时的想法是在a(竖屏)页面跳转到b(横屏)页面,在跳转之前就让屏幕横过来,然后b跳a的时候再竖过来,
但是如果这么书写将会导致竖屏的页面样式紊乱,看官方文档和大家的评论发现,要使用这种写法需页面样式单位都是由px构成,rpx和upx均会导致样式紊乱。
最后我使用了以上写法,发现只要是在一个页面横屏,离开时在这个页面竖屏,那么其他页面将不会受到影响。
本文来自博客园,作者:prince11,转载请注明原文链接:https://www.cnblogs.com/prince11/p/17806160.html