uniAPP实现单页面横竖屏切换

最近在用uniapp开发，发现官方文档只能全局配置横竖屏切换，找了些文档，最终实现了效果

一、官方全局设置

https://uniapp.dcloud.io/collocation/pages?id=globalstyle
在pages.json中添加配置：

"globalStyle": {// ..."pageOrientation": "auto"},

此方法可以配置全部页面横竖屏切换（切换时有rpx坑，尽量使用百分比布局和 px , rem）

二、实现某个页面横竖屏切换，其他页面竖屏显示

1.在manifest.json中添加配置

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

Screen.lockOrientation()用法

2.在需要横竖屏切换的页面

在onload中加

 // #ifdef APP-PLUSplus.screen.lockOrientation('default'); // #endif

在onUnload中加

 // #ifdef APP-PLUSplus.screen.lockOrientation('portrait-primary'); // #endif

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

3.在不需要横竖屏切换的页面

在onload中加

 // #ifdef APP-PLUSplus.screen.lockOrientation('portrait-primary'); // #endif

在onUnload中加

 // #ifdef APP-PLUSplus.screen.lockOrientation('portrait-primary'); // #endif

注：这一步可在第二步完成后手机调试下，如果不想横屏的页面也可切换，再加这段代码

uniAPP实现单页面横竖屏切换相关推荐

android 横竖切换demo,移动页面横竖屏切换提示 - 轩枫阁
前言在制作移动页面的时候常会考虑页面在不同手机分辨率下的显示效果,通过一些布局技巧使页面从最小的iphone4 兼容至较大的iphone6 plus及其他android手机. 然而却常常忽略了一个 ...
uniapp 移动端两种横竖屏切换方案
全局配置横竖屏 1.在pages.json中添加配置: "globalStyle": {"pageOrientation": "auto"} ...
WebView网页视频统一全屏播放及横竖屏切换
WebView 支持 Html5 video 进行全屏播放及横竖屏自动切换 1.检查AndroidManifest.xml清单文件,WebView控件所在的Activity配置信息;检查Activit ...
android的横竖屏切换,Android横竖屏切换初步探究
当手机横竖屏切换的时候,activity,默认会重新走一遍生命周期,即销毁当前,然后重新创建首先,很多软件在设计和开发中为了避免横竖屏切换时引发不必要的麻烦,通常需要让App禁止掉横竖屏的切换,这就 ...
android activity横竖屏切换，Activity重新创建问题解决！
activityA和B A跳转到B 1:在主配置文件中添加Bactivity,如果不想B在横竖屏切换的时候导致activity的销毁和重新创建;可在声明activity中添加 android:conf ...
Android-加速传感器或者OrientationEventListener做横竖屏切换
在播放视频的时候,可能要做横竖屏的切换,但是,用户可以设置自己的手机关掉屏幕旋转,这个时候就需要想其他的办法了,比如:加速传感器或者OrientationEventListener. 1.这是用加速传 ...
Android视频播放器横竖屏切换时遇到的问题记录
我用的播放器是KMedia,一个开源的播放器,链接如下 https://github.com/BlackQi/KMedia 我个人觉得还是很好用的,支持定制.现在遇到一个问题就是播放时横屏铺满全屏视频 ...
Compose 横竖屏切换时状态如何保存？rememberSaveable 实现原理分析
前言在这篇文章中提到了 Navigation 的状态保存实际是由 rememberSaveable 实现的,有同学反馈希望单独介绍一下 rememberSaveable 的功能及实现原理.我们都知道 ...
Android开发中横竖屏切换的问题以及系统提供的常用Activity
Android开发中横竖屏切换的问题以及系统提供的常用Activity(总结) 2018年06月28日 16:18:45 北极熊的微笑阅读数:72 横竖屏切换与状态保存的问题前面也也说到了App横 ...

uniAPP实现单页面横竖屏切换

uniAPP实现单页面横竖屏切换

一、官方全局设置

二、实现某个页面横竖屏切换，其他页面竖屏显示

1.在manifest.json中添加配置

2.在需要横竖屏切换的页面

3.在不需要横竖屏切换的页面

uniAPP实现单页面横竖屏切换相关推荐

最新文章

热门文章