H5页横屏VUE项目bug处理

最新推荐文章于 2024-04-11 03:50:07 发布

凡诃_

最新推荐文章于 2024-04-11 03:50:07 发布

阅读量3.2k

点赞数

分类专栏： h5-app 文章标签： h5-vue-横屏

本文链接：https://blog.csdn.net/fly_xinxin/article/details/78749120

版权

h5-app 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

this.hengping = false
      this.shuping = true
      window.addEventListener('orientationchange', function(event){
        /*竖屏*/
        if ( window.orientation == 180 || window.orientation==0 ) {
          _this.hengping = false
          _this.shuping = true
        }
        /*横屏*/
        if( window.orientation == 90 || window.orientation == -90 ) {
          _this.hengping = true
          _this.shuping = false
        }
      });

在vue中，判断处理可以放在app.vue中，因为router-view就在这个层中，可以给router-view添加状态并且有一个同级的横屏块就可以了

html如下

    <div id="hengping" v-show="hengping">
      <div class="imgbox">
        <img src="./assets/phone.gif" height="100" width="95"/>
        <div>为了更好的体验，请竖屏使用系统</div>
      </div>
    </div>

    <view-box v-show="shuping">

CSS:

#hengping{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
  background-color: #313131;
    .imgbox{
      display: inline-block;
      width:300px;
      height:180px;
      position: absolute;
      text-align: center;
      top: 0;
      right: 0;
      bottom: 0;
      left:0;
      margin: auto;
    >div{
           margin-top: 30px;
           color: #e5e5e5;
         }
    }
}

要点如下： ====》》》》

1。横屏的div要用v-if ，因为固定定位如果用v-show可能会导致竖屏后还会有残余。
2。竖屏部分必须用v-show，因为如果是if router块会由竖屏转横屏的时候有css残留，虽然转为横屏了，他会把竖屏时候得宽高转到横屏去，再进行if处理，于此同时横屏时候的高度也会带给router这块。
当再次转回竖屏的时候，他的宽没问题，高度用的是横屏时候得高度。所以会有router裁剪。
如果用v-show router块他就像不做处理一样。页面正常横屏全屏占满。只不过页面有结构，不展示出来而已。只展示横屏提示，但再次竖屏，效果就想不添加横屏提示一样完美。