uni-app应用设置 可以根据手机屏幕旋转进行 (横/竖) 屏切换

首先 我们打开项目的 manifest.json 在左侧导航栏中找到 源码视图

然后找到 app-plus 配置 在下面加上

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

然后 在需要实现旋转屏幕的页面中加上代码

javascript 复制代码
onLoad() {
// #ifdef APP-PLUS
	plus.screen.lockOrientation('default');
	// #endif
},
   // 页面关闭时清除横屏正方向
   onUnload() {
	// #ifdef APP-PLUS
	plus.screen.lockOrientation('portrait-primary');
	// #endif
},

然后 我们真机调试 默认状态下还是竖屏的

但是 我们旋转屏幕 将手机横过来 神奇的一幕就出现了

然后 我们可以通过

javascript 复制代码
uni.getSystemInfo({
	success: function(res) {
		if (res.windowWidth > res.windowHeight) {
			// 横屏
		} else {
			// 竖屏
		}
	}
})

来判断当前在什么情况下

简单说 高度多就是竖屏 宽度多 就是横屏

相关推荐
八月林城6 分钟前
echarts在uniapp中使用安卓真机运行时无法显示的问题
android·uni-app·echarts
哈贝#9 分钟前
vue和uniapp聊天页面右侧滚动条自动到底部
javascript·vue.js·uni-app
iOS阿玮2 小时前
苹果2024透明报告看似更加严格的背后是利好!
uni-app·app·apple
邹荣乐5 小时前
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合
前端·微信小程序·uni-app
不吃糖葫芦36 小时前
App使用webview套壳引入h5(三)——解决打包为app后在安卓机可物理返回但是在苹果手机无法测滑返回的问题
uni-app·webview
半兽先生10 小时前
uniapp微信小程序视频实时流+pc端预览方案
微信小程序·uni-app·音视频
胡斌附体19 小时前
uniapp路由跳转toolbar页面
小程序·uni-app·switch·路由·type·uview-ui
阿諪諪20 小时前
在VSCode中开发一个uni-app项目
ide·vscode·uni-app
发现你走远了1 天前
『uniapp』把接口的内容下载为txt本地保存 / 读取本地保存的txt文件内容(详细图文注释)
开发语言·javascript·uni-app·持久化保存
lqj_本人1 天前
鸿蒙OS&UniApp结合机器学习打造智能图像分类应用:HarmonyOS实践指南#三方框架 #Uniapp
机器学习·uni-app·harmonyos