HbuilderX 竖屏切换横屏后,返回点击其他页面,字体变大样式乱的解决方案

12 篇文章 0 订阅

官方给出了2种解决方案

一. 不要使用 upx ,rpx 的单位,该单位需要根据屏幕进行计算,推荐使用em,rem,px 单位

这种方案要修改的代码太多了!实在不想改,下面来看我的方案

1. page/index/page2 页面,onLoad进行横屏并全屏

2. 点击返回按钮执行:myback 方法

3. myback 方法中会解除全屏;并恢复竖屏,同时跳转到一个新页面 /page/index/page3( 最好永远不让人访问的页 )

    onLoad(req) {
		//#ifdef APP-PLUS
		setTimeout(function(){
			plus.navigator.setFullscreen(true);
			plus.screen.lockOrientation("landscape-primary");
		},500);
		//#endif	
	},
	methods: {
		myback(){
            var _this = this;
			if(this.getOs() == 'android'){
				//#ifdef APP-PLUS
				plus.navigator.setFullscreen(false);
				plus.screen.lockOrientation("portrait-primary");
				setTimeout(function(){
					_this.jumpTab('/pages/index/test?b=2')
				},500);
				//#endif	
			}else{
				_this.back();
			}
		},
        getOs(){ 
            if(typeof(plus)!="undefined"){
			    const res = uni.getSystemInfoSync();
			    return res.platform;
		    }else{
			 if(typeof(window)=="undefined"){
				 return "xcx";
			 }else{
				var ua = window.navigator.userAgent.toLowerCase();
				if(ua.match(/MicroMessenger/i) == 'micromessenger'){
					return "weixin";
				}else{
					return "h5";
				} 
			 } 
		   }
        },
        jumpTab:function(path){
		    uni.navigateTo({
			    url:path,
			    animationType:"fade-in"
		    })
	    },
        back:function(){
		    uni.navigateBack({  })
	    }
    }

4. 在/page/index/page3 的 onLoad的方法中执行,回退到2个页面之前的页面,也就是返回页面

        onLoad(req) {
				uni.navigateBack({
					delta:2
				})
        }

这样的话就实现了,在page3页面中 样式乱了,系统自动调整到竖屏的upx,rpx字体比例,然后快速的回退到page1页面,再操作跳转到其他的页面,其他页面的样式将不会再乱,或者字体变大的情况

二.固定屏幕方向

固定屏幕方向如何实现页面旋转呢? 对最外层的 <view :style="hengStyle"> 设置一个style

        //#ifdef APP-PLUS
		plus.navigator.setFullscreen(true);
		var conW = plus.screen.width;
		var conH = plus.screen.height;
		console.log("屏幕",conH,conW);
		this.hengStyle = {
			"transform":"rotate(90deg) translate("+((conH-conW)/2)+"rpx,"+((conH-conW)/2)+"rpx)",
			"width":conH+"rpx", 
			"height":conW+"rpx",
			"transform-origin":"center center", 
			"-webkit-transform-origin": "center center"
		}
		//#endif	

感谢您的支持,写的文章如对您有所帮助,开源不易,请您打赏,谢谢啦~

 

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值