用uniapp写app,想要打包后横屏显示的方法

在网络上找了很多方法,打包之后都没什么用,该竖屏还是竖屏,挺无语的,最后试了一种方法才解决了打包后也横屏显示的方法

pages.json 文件中:

"pageOrientation": "auto"

这一条属性即可

设置了以后最好让页面随设备大小自适应,减少bug的产生

比如这样实现:

js:

onLoad() {
	uni.getSystemInfo({
		success: (res) => {
			const windowWidth = res.windowWidth; // 窗口宽度
			const windowHeight = res.windowHeight; // 窗口高度
			this.bodysHeight = windowHeight;
		}
	});
},
onResize(res) {
	uni.getSystemInfo({
		success: (res) => {
			const windowWidth = res.windowWidth; // 窗口宽度
			const windowHeight = res.windowHeight; // 窗口高度
			this.bodysHeight = windowHeight;
		}
	});
},

view:

<view class="content" :style="{ height: swiperHeight + 'px' }">

</view>

宽度在初始设置成100%即可,切记,不要用vh   ☂꒰´•௰•`๑꒱…

### 实现 UniApp 应用程序横屏显示 为了使应用程序在启动时进入横屏模式,在 `app.vue` 文件中的 `onLaunch` 方法里可以加入一段延时执行的代码来锁定幕方向为横向: ```javascript setTimeout(() => { plus.screen.lockOrientation("landscape"); }, 500); ``` 这段代码会在应用启动后等待半秒再将设备的方向固定到横屏位置[^2]。 另外一种方式是在项目的配置文件中指定页面的方向属性。对于全局性的设置可以在 `manifest.json` 文件内定义支持的方向列表,例如仅限于两种主要的横屏方向: ```json { ... "orientation": ["landscape-primary", "landscape-secondary"] } ``` 这会告诉编译工具生成的应用应该能够在这两个特定的角度下正常工作[^3]。 如果希望某些特定页面保持某种方向而其他部分不受影响,则可在对应的页面配置文件 `pages.json` 中单独设定该页的方向参数: ```json { "path": "yourPagePath", "style": { "navigationBarTitleText": "Your Page Title", "pageOrientation": "auto" } } ``` 这里 `"pageOrientation"` 设置成 `"auto"` 表示此页面可以根据用户的操作自动调整其展示角度;也可以将其设为具体的某个方向值如 `"landscape"` 或者 `"portrait"` 来强制规定页面始终处于某一状态下。 最后需要注意的是,在实际开发过程中可能还需要处理一些特殊情况,比如当从切换至横屏时可能会遇到界面布局错位等问题。这时可以通过监听窗口大小变化事件并相应更新UI组件的位置和尺寸等方式来进行优化[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值