uni-app怎样设置横屏?

更新日期: 2022-02-09阅读: 5.8k标签: uniapp

在使用uni-app开发app应用时候,应用需要横屏显示,那么该如何实现呢?


一、打开APP就是横屏

方式一:

打开pages.json页面,在globalStyle中添加pageOrientation选项,如下:

"globalStyle": {
"navigationStyle":"custom",
"pageOrientation": "landscape" //横屏配置,支持auto/portrait/landscape
}

属性说明:

"auto":如果页面添加了上述声明,则在屏幕旋转时,这个页面将随之旋转,显示区域尺寸也会随着屏幕旋转而变化;
"portrait":表示固定为竖屏显示。
"landscape":表示固定为横屏显示。

Ps:横屏配置,全局屏幕旋转设置(仅 APP/微信/QQ小程序)。

方式二:

或者在App.vue页面中,添加如下代码

onLaunch: function() {
// #ifdef APP-PLUS
plus.screen.unlockOrientation();//设置横屏-全局globalStyle-pageOrientation已设置
plus.screen.lockOrientation('landscape-primary');
// #endif
},

说明:锁定屏幕方向后屏幕只能按锁定的屏幕方向显示,关闭当前页面后仍然有效。 可再次调用此方法修改屏幕锁定方向或调用unlockOrientation()方法恢复到应用的默认值。

lockOrientation参数值。锁定屏幕方向可取以下值: 

"portrait-primary": 竖屏正方向; 
"portrait-secondary": 竖屏反方向,屏幕正方向按顺时针旋转180°; 
"landscape-primary": 横屏正方向,屏幕正方向按顺时针旋转90°; 
"landscape-secondary": 横屏方向,屏幕正方向按顺时针旋转270°; 
"portrait": 竖屏正方向或反方向,根据设备重力感应器自动调整; 
"landscape": 横屏正方向或反方向,根据设备重力感应器自动调整;


二、设置APP内某个页面为横屏

需要在对应页面onShow()的方法中添加plus.screen.lockOrientation方法:

onShow() {
// #ifdef APP-PLUS
plus.screen.unlockOrientation();//解除屏幕方向的锁定,但是不一定是竖屏;
plus.screen.lockOrientation('landscape-primary');
// #endif
},

在页面卸载时候,需要注意还原哦,比如:

//页面卸载时切换为竖屏配置
onUnload() {
// #ifdef APP-PLUS
plus.screen.lockOrientation('portrait-primary'); //锁死屏幕方向为竖屏
// #endifs
}


三、横屏 IOS安全区如何设置全屏

在应用需要全屏显示的时候,我们发现在ios中,安全区域是可能存在空白的,比如全屏web-view的组件,实现方法如下:

setStyle(){//设置样式
let style={}
if(!this.screen){//竖屏
let safeTopArea = uni.getSystemInfoSync().safeAreaInsets.top
let safeBoottom = uni.getSystemInfoSync().safeAreaInsets.bottom
style={
top: - safeTopArea, //ios的位置上移顶部安全区域的高度
height:uni.getSystemInfoSync().windowHeight + safeBoottom + safeTopArea, //高度+安全区域的高度
}
if(!this.safeTop){//不处理顶部安全区
style={
top:0,
height:uni.getSystemInfoSync().windowHeight + safeBoottom,
}
}
}else{//横屏
let safeLeftArea = uni.getSystemInfoSync().safeAreaInsets.left
let safeRightArea = uni.getSystemInfoSync().safeAreaInsets.left
style={
left: - safeRightArea,
width: uni.getSystemInfoSync().windowWidth + safeLeftArea + safeRightArea,
height:'100%',
}
}
let currentWebview = this.$scope.$getAppWebview() //获取webview
let wv = currentWebview.children()[0]
wv.setStyle(style)
},

该方法仅供参考。


四、uniapp ios无法横竖屏

使用上面的代码,在ios中如果横竖屏切换,会出现无法生效的问题,我们需要在manifest.json文件和pages.json文件进行如下配置

//第一在manifest.json文件下的app-plus=>distribute下配置:
"screenOrientation" : [
"portrait-primary",
"landscape-primary",
"portrait-secondary",
"landscape-secondary"
],
//第二在pages.json文件的globalStyle下配置:
"pageOrientation": "auto"
//最后在需要横竖屏的页面调用
//竖屏
plus.screen.lockOrientation('portrait-primary');
//横屏
plus.screen.lockOrientation('landscape-primary');


链接: https://www.fly63.com/article/detial/10965

uni-app 微信小程序授权登录

uni.getUserInfo 接口调用方式起初通过button 来获取用户信息,或者 直接调用 uni.getUserInfo 来获取信息 在当前微信更新接口后,这2个接口将直接返回匿名用户数据,不在弹窗提示

uniapp之this作用域

发现了点击按钮1可以更新title内容,但是点击按钮2却无法更新title内容。这个究竟是为什么呢?在changeTitle2方法的success方法中,该success方法指向闭包,所以this属于闭包

uniapp 页面跳转传值和接收

首先介绍最原始的跳转方法,类似于html中的 a 标签,不过在uniapp中需要将 a 标签换成 <navigator url=跳转的地址>……</navigator>

uniapp开发注意事项

static 目录下的 js 文件不会被编译,如果里面有 es6 的代码,不经过转换直接运行,在手机设备上会报错。css、less/scss 等资源同样不要放在 static 目录下

uniapp验证码倒计时60s的实现

发送验证码时,不能让客户一直发送验证码,所以需要设置一个60s后才能发送一次;具体代码实现:因为app和其他app不太一样,所以需要选择以这样的方式展示是时间,但是js逻辑代码是一样的;

uni-app中使用computed计算属性

computed里面的属性不能在data属性中出现,用来监控computed中自定义的变量 ,computed合适多个变量或对象处理后返回一个结果值,其中一个值发生变化则computed监控的属性值就会发生变化

uni-app开发经验分享: 多页面传值的三种解决方法

开发了一年的uni-app,在这里总结一些uni-app开发中的问题,提供几个解决方法,分享给大家:问题描述:一个主页面,需要联通一到两个子页面,子页面传值到主页面,主页面更新

uni-app开发注意事项

当重复设置某些属性为相同的值时,不会同步到view层。 例如:每次将scroll-view组件的scroll-top属性值设置为0,只有第一次能顺利返回顶部。 这和props的单向数据流特性有关

uniapp页面通信方法总汇

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

uniapp/小程序实现Url生成二维码图片

基于QR.createQrCodeImg方法生成二维码,在使用uniapp开发的小程序,app应用,某一页面需要将网页Url生成的二维码进行展示,即将Url生成为base64的二维码图片。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!