uniapp 横竖屏设置

整个项目的横竖屏设置

App.vue

<script>
  export default {
    onLaunch: function() {
      console.log('App Launch')
        // 锁定横屏
        // plus.screen.lockOrientation("landscape-primary");  
        // 锁定竖屏   
        plus.screen.lockOrientation("portrait-primary");
      },
      onShow: function() {
        console.log('App Show')  
      },
      onHide: function() {
        console.log('App Hide')
      }
}
</script>

<style>
    /*每个页面公共css */
</style>

单个页面设置横屏

index.vue

onLoad(option) {
  setTimeout(function(){
    plus.screen.lockOrientation('landscape-primary');
  },10)
}
// 监听页面返回
onBackPress(e) {
  // plus.screen.unlockOrientation(); //解除屏幕方向的锁定,但是不一定是竖屏;
  uni.redirectTo({
    url: 'login'
  });
  plus.screen.lockOrientation('portrait'); //锁死屏幕方向为竖屏
  return true;
},

注意:
1.定时器一定要写,不然不生效。
2.必须解除横屏或者设置竖屏。

问题:

一、plus is not defined
这个报错是说明要运行在手机app上才能找到plus这个方法,因为plus是app才有的方法
二、界面混乱
由于横屏后使用rpx会导致界面混乱。解决:
1.使用px,但是px不会适配。有可能在不同的手机上展示不同
2.在这个页面单独使用rem,把rem设置成1/750屏幕大小

大家有任何问题都可以指出,欢迎评论!
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容