uniapp 移动端两种横竖屏切换方案

1、打开uniapp的manifest.json 文件，找到左侧菜单最后一栏“源码视图”，点进去，在最底部添加以下代码"orientation": ["portrait-primary","portrait-secondary","landscape-primary","landscape-secondary"]这四个分别是竖屏正方向、竖屏反方向、横屏正方向、横屏反方向2、在需要横屏的页面给两个

HaushoLin

16484人浏览 · 2021-04-10 00:38:24

HaushoLin · 2021-04-10 00:38:24 发布

全局配置横竖屏

1、在pages.json中添加配置：

"globalStyle": {
		"pageOrientation": "auto"
	}

此方法可以配置全部页面横竖屏切换（）

2、打开uniapp的manifest.json 文件，找到左侧菜单最后一栏 “源码视图”，点进去，在最底部添加以下代码

"orientation" : [
		//竖屏正方向
		"portrait-primary",
		//竖屏反方向
		"portrait-secondary",
		//横屏正方向
		"landscape-primary",
		//横屏反方向
		"landscape-secondary",
		//自然方向
		"default"
	]

方案一、横竖屏自动切换的页面

说明：这个方案是指定某个页面可根据用户手机横/竖自动切换，不过需要写两套样式，横竖各一套，在data定义一个判断横竖的值，再搭配uniapp 页面生命周期onResize监听窗口的变化，横时isLandScape初始值为true，竖为false，给最外层view根标签的类样式使用三元判断动态绑定，isLandScape的值为true用横屏类样式，false用竖屏类样式。

1、我们先来看张效果图

横竖屏自动切换

2、需要横竖屏自动切换的页面写入

	// 页面加载完给自然方向，它就能根据用户横竖自动切换
	onLoad() {
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('default');
			// #endif
		},
	// 页面关闭时清除横屏正方向
	onUnload() {
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('portrait-primary');
			// #endif
		},

3、其他不需要横屏的页面例如:index.vue

在两个生命周期中设置竖屏并且关闭页面时清除

	onLoad() {
			// #ifdef APP-PLUS
				 plus.screen.lockOrientation('portrait-primary'); 
			// #endif
		},
	onUnload() {
			// #ifdef APP-PLUS
				  plus.screen.lockOrientation('portrait-primary'); 
			// #endif
		},

特别说明：// #ifdef APP-PLUS 与 // #endif 是让代码在app生效，解决plus is not defined的报错

4、核心逻辑代码

①、在data中初始一个判断横竖屏切换的值

isLandScape: false // 是否横屏，默认为竖屏

②、在页面生命周期onResize中监听窗口的变化

		onResize() {
			let _this = this
			uni.getSystemInfo({
				success: function(res) {
					if (res.windowWidth > res.windowHeight) {
						// 横屏
						_this.isLandScape = true
					} else {
						// 竖屏
						_this.isLandScape = false
					}
				}
			})
		}

5、在需要横竖屏切换的页面中用CSS预处理语言写两套样式(横/竖)，我用的是scss

// 竖屏   chart_portrait是父类包裹层,tbcls只是我的表格样式，你可以根据你的具体需求写相应的样式
	.chart_portrait {
		height: 36vh;
		font-size: 2vh;
		text-align: center;

		.tbcls {
			width: 97vw;
		}
	}

	// 横屏
	.chart_lanscape {
		height: 82vh;
		font-size: 2vw;
		text-align: center;

		.tbcls {
			width: 98vw;
		}

	}

6、用三元判断data中的isLandScape是否为false，是的话为竖屏，那么就用竖屏类样式，否则用横屏类样式

<view :class="{'chart_portrait': !isLandScape, 'chart_lanscape': isLandScape}">
</view>

方案二进入指定页面固定死横屏，出来自动切为竖屏

说明：这个方案就相对简单很多，只需要进入切换为横屏，出来切竖屏，不过根标签view需要修改样式，我用的vw/vh，会自动适配高宽,也可以用百分比和rem,但是别用rpx,有坑

1、还是先看效果图

在这里插入图片描述

2、js

  onLoad() {
    // 进入当前页面 自动切换成固定横屏
    // #ifdef APP-PLUS
    plus.screen.lockOrientation("landscape-primary");
    // #endif
  },
  onUnload() {
    // 退出当前页面时 自动切换成竖屏
    // #ifdef APP-PLUS
    plus.screen.lockOrientation("portrait-primary");
    // #endif
  },

3、css

// 横屏   
.chart_lanscape {
  height: 82vh;
  font-size: 2vw;
  text-align: center;
	// 这是我的表格类名  让其宽为视口宽的98%
  .tbcls {
    width: 98vw;
  }
}

两个方案的区别

相同点：都是指定某个页面，两种退出当前页面都是自动切换为竖屏模式
不同点：
- 第一种：可根据用户手机横/竖自动切换，不过需要写两套样式，横竖各一套，
  
  在data定义一个判断横竖的值，再搭配uniapp 页面生命周期onResize监听窗口的变化，横时isLandScape初始值为true，竖为false，给最外层view根标签的类样式使用三元判断动态绑定，isLandScape的值为true用横屏类样式，false用竖屏类样式。
- 第二种：进入就固定死横屏，只需要写一套类样式。