uniapp 移动端 两种横竖屏切换方案
全局配置横竖屏
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-PLUSplus.screen.lockOrientation('default');// #endif},// 页面关闭时清除横屏正方向onUnload() {// #ifdef APP-PLUSplus.screen.lockOrientation('portrait-primary');// #endif},
3、其他不需要横屏的页面 例如:index.vue
在两个生命周期中设置竖屏 并且关闭页面时清除
onLoad() {// #ifdef APP-PLUSplus.screen.lockOrientation('portrait-primary'); // #endif},onUnload() {// #ifdef APP-PLUSplus.screen.lockOrientation('portrait-primary'); // #endif},
特别说明:// #ifdef APP-PLUS 与 // #endif 是让代码在app生效,解决plus is not defined的报错
4、核心逻辑代码
①、在data中初始一个判断横竖屏切换的值
isLandScape: false // 是否横屏,默认为竖屏
②、在页面生命周期onResize中监听窗口的变化
onResize() {let _this = thisuni.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-PLUSplus.screen.lockOrientation("landscape-primary");// #endif},onUnload() {// 退出当前页面时 自动切换成竖屏// #ifdef APP-PLUSplus.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用竖屏类样式。
第二种: 进入就固定死横屏,只需要写一套类样式。
注意
需要横/竖屏切换的页面尽量使用 百分比布局 和 px , rem,切换时有rpx坑
结尾
这两个效果图的源代码我已经发在码云上了,感兴趣的小伙伴可以去阅读或克隆到本地用真机调试感受一下横竖屏(不知如何真机调试,点我进入教程)。希望这篇文章能帮到你,感谢您的观看。
uniapp 移动端 两种横竖屏切换方案相关推荐
- Android--播放视频横竖屏切换的2种方式
Activity的横竖屏切换其实很简单, 如果你的Activity没有声明android:configChanges, 那么Activity的方向就会随着手机的旋转而旋转. (手机需要开启自动旋转功能 ...
- uniAPP实现单页面横竖屏切换
uniAPP实现单页面横竖屏切换 最近在用uniapp开发,发现官方文档只能全局配置横竖屏切换,找了些文档,最终实现了效果 一.官方全局设置 https://uniapp.dcloud.io/coll ...
- 移动端判断手机横竖屏状态
禁用用户自动缩放功能: <meta name="viewport" content="width=device-width, initial-scale=1.0, ...
- Android 11---WMS之横竖屏切换流程详解之一
本文以Activity.setRequestedOrientation为入口梳理下横竖屏切换的详细流程. 代码均是基于最新的11.0版本. 第一篇主要讲了横竖屏切换时的准备操作: 更新方向,执 ...
- android 图片横竖判断_Android横竖屏切换及其对应布局加载问题详解
本文为大家分享了Android横竖屏切换及其对应布局加载问题,供大家参考,具体内容如下 第一,横竖屏切换连带横竖屏布局问题: 如果要让软件在横竖屏之间切换,由于横竖屏的高宽会发生转换,有可能会要求不同 ...
- android的横竖屏切换,Android横竖屏切换 初步探究
当手机横竖屏切换的时候,activity,默认会重新走一遍生命周期,即销毁当前,然后重新创建 首先,很多软件在设计和开发中为了避免横竖屏切换时引发不必要的麻烦,通常需要让App禁止掉横竖屏的切换,这就 ...
- Android 横竖屏切换的处理 (转载)
Android 中,缺省情况下屏幕的切换动会销毁当前的Activity,并且重启Activity.当然这种缺省的处理方式可能不符合我们的要求. 可以有多种选择改变这种处理方式. 一种方式是在销毁Act ...
- WebView网页视频统一全屏播放及横竖屏切换
WebView 支持 Html5 video 进行全屏播放及横竖屏自动切换 1.检查AndroidManifest.xml清单文件,WebView控件所在的Activity配置信息;检查Activit ...
- android 横竖屏幕切换,Android 横竖屏切换总结
一.Android切换横竖屏 应用的横竖屏设置 应用的横竖屏设置主要是通过Activity的screenOrientation属性控制,属性值如下: 主要有以下两种方式设置screenOrientat ...
最新文章
- 婚纱摄影小程序能带来订单吗?小程序如何做营销?
- 华人一作占半数,陶大程等人上榜,CVPR公布32篇最佳论文候选
- 物理、线性、虚拟、逻辑、有效地址
- 直播报名 | 用户中台建设实践解析
- SQL SERVER – Beginning of SQL Server Architecture – Terminology – Guest Post
- android 屏幕切换监听
- java 8 Streams简介
- 判别分析分为r型和q型吗_电流互感器天天见,但是你真正了解和知道它的一些注意事项吗?...
- python斐波那契数列30_python的30个骚操作
- 使用Maven管理Eclipse Java项目
- 公有链、私有链、联盟链、许可链,这些区块链又分别代表着什么意思?
- java 线程的理解_浅谈对多线程的理解(一)
- header php下载文件很小,php中Accept-Length获取不到下载文件的大小
- PHP中常见的面试题3(附答案)
- 如何整理MacOS的菜单栏图标
- 实验7 OpenGL光照
- 安卓手机利用DroidCam当电脑摄像头使用方法
- Unity3d 局域网小游戏DEMO学习
- matlab神经网络预测数据,Matlab神经网络预测复数
- 有哪些有关java类最新发表的毕业论文呢?
热门文章
- 著名cad软件cad2022直装版
- 乔布斯在斯坦福大学演讲稿英文_TED精选 | 小“乔布斯”Thomas Suarez:一名12岁的手机应用开发者!...
- 【MFC】工具条(16)
- 2021年危险化学品生产单位安全生产管理人员新版试题及危险化学品生产单位安全生产管理人员免费试题
- 纯前端excel导出
- 《Adobe After Effects CS6中文版经典教程》——2.7 预览特效
- imail邮件服务器的安装,IMail 的安装和设置 图文教程
- 删除流氓软件残留的dll系统文件
- 小明同学利用计算机软件绘制函数,各地选择题压轴类专题原卷.doc
- Direct3D9 教程02