vue中监听页面旋转,echarts移动端全屏展示

因为是移动端,适配用的postcss-px2rem,所以当横屏的时候,样式会错乱

 mounted() {
    
    
    // 监听页面旋转
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", this.isPortrait, false);
 }
 methods: {
    
    
	 // 横竖屏
    isPortrait() {
    
    
      if (window.orientation === 180 || window.orientation === 0) {
    
    
        console.log('竖屏');
       
        return true;
      }
      if (window.orientation === 90 || window.orientation === -90) {
    
    
        console.log('横屏');
        // 不好使
        document.getElementsByTagName('html')[0].style.fontSize = '37.5px';
        // 不好使
        // this.$nextTick(() => {
    
    
        //   document.getElementsByTagName('html')[0].style.fontSize = '37.5px';
        // });
        return false;
      }
    },
}

最终就不再监听页面的旋转,而是监听页面尺寸的变化

mounted() {
    
    
// 页面尺寸的变化
window.addEventListener("resize", this.renderResize, false);
}
methods() {
    
    
  renderResize() {
    
    
      document.getElementsByTagName('html')[0].style.fontSize = '37.5px';
      this.myEcharts.resize();  // 在这里是为了完成表的横屏展示哈
    },
}

思考:当时还在想页面旋转这个api有没有回调函数。经过这次,可以知道,页面旋转在前,然后尺寸发生变化,可以在尺寸变化时写一些方法,也就相当于是在旋转的回调里写了

 // 根据不同的屏幕宽度换算字体大小  如果后期返回echarts图标字体不会变化
    transformFontSize(fontsize) {
    
    
      const width = window.screen.width;
      const ratio = width / 1920;
      return parseInt(fontsize * ratio);// eslint-disable-line 
    },

这波echarts的全屏展示,因为我是内嵌在app里的,所以呢,我要全屏展示的额时候会给app通信,app去调机器的api(这个是我想的逻辑,具体app怎么操作的我不清楚哈),当时和app确定过,如果用户锁定竖屏状态他能否调成功,app开发说是可以的。web这变就很简单了,就是做个图标的重绘就可以的

app和web通信用的是下面的工具库

import {
    
     webViewContent } from 'hybrid-webframework';

export default {
    
    
    listen: (message, callback) => {
    
    
        return webViewContent.listenMessage(message, callback);
    },
    send: (message, prama, listener) => {
    
    
        return webViewContent.sendMessage(message, prama, listener);
    }
};

猜你喜欢

转载自blog.csdn.net/weixin_43131046/article/details/125422724
今日推荐