uni小程序判断手机是否开启自动旋转,横屏给出提示(微信小程序类似)

在pages. json中

全局在globalStyle添加"pageOrientation": "auto"

单个页面在单个页面的配置style下添加如下

"mp-weixin": {
                                "pageOrientation": "auto"
                              },

单个页面vue中添加如下

onShow(){
            // 0为竖屏,1为横屏
                let lastState = 0;
                let lastTime = Date.now();
              
                wx.startAccelerometer();
              
                wx.onAccelerometerChange((res) => {
                  // console.log('onAccelerometerChange执行了')
                  const now = Date.now();
                  
                  // 500ms检测一次 500ms实测可能会导致页面的onResize先执行了,
                  if (now - lastTime < 300) {
                    return;
                  }
                  lastTime = now;
              
                  let nowState;
              
                  // 57.3 = 180 / Math.PI
                  const Roll = Math.atan2(-res.x, Math.sqrt(res.y * res.y + res.z * res.z)) * 57.3;
                  const Pitch = Math.atan2(res.y, res.z) * 57.3;
              
                  // console.log('Roll: ' + Roll, 'Pitch: ' + Pitch)
              
                  // 横屏状态
                  if (Roll > 50) {
                    if ((Pitch > -180 && Pitch < -60) || (Pitch > 130)) {
                      nowState = 1;
                    }else {
                      nowState = lastState;
                    }
              
                  }else if ((Roll > 0 && Roll < 30) || (Roll < 0 && Roll > -30)) {
                    let absPitch = Math.abs(Pitch);
              
                    // 如果手机平躺,保持原状态不变,40容错率
                    if ((absPitch > 140 || absPitch < 40)) {
                      nowState = lastState;
                    }else if (Pitch < 0) {/*收集竖向正立的情况*/
                      nowState = 0;
                    }else {
                      nowState = lastState;
                    }
                  }
                  else {
                    nowState = lastState;
                  }
              
                  // 状态变化时,触发
                  if (nowState !== lastState) {
                    lastState = nowState;
                    if (nowState === 1) {
                        var flag=false;
                        var data = wx.onWindowResize(function(res){
                              flag = true;
                            })
                            setTimeout(
                                function () {
                                    if(flag == false){
                                        uni.showToast({
                                            icon:'none',
                                            duration:5000,
                                            title:'请先打开手机的自动旋转功能!'
                                        })
                                    }
                                }, 2000);
                      console.log('change:横屏');
                      
                    }else {
                      console.log('change:竖屏');
                    }
                  }
                });
                
        },
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值