Uniapp横竖屏切换&让某一个页面只能横屏或者竖屏

先看官方属性

javascript 复制代码
plus.screen.lockOrientation('default'); // 默认横竖屏切换
plus.screen.lockOrientation('portrait-primary');// 竖屏展示
plus.screen.lockOrientation('landscape-primary'); // 强制横屏

简单需求:允许横竖屏切换

在 page.json增加以下代码

javascript 复制代码
	"globalStyle": {
		"pageOrientation": "auto" // 屏幕自动切换
	},

复杂需求:让某个界面只能横屏或者竖屏展示,其他界面不影响

A界面(可以切横竖屏)

javascript 复制代码
	onLoad() {
			//  页面加载允许横竖屏展示
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('default');
			// #endif
		},

B界面(只允许竖屏)

javascript 复制代码
		//页面显示时切换为横屏配置
		onShow() {
			// #ifdef APP-PLUS
			uni.showLoading({
				title: "加载中..."
			})
			setTimeout(() => {
				plus.screen.unlockOrientation();
				plus.screen.lockOrientation('portrait-primary');
				uni.hideLoading();
			}, 200)
			//#endif
		},
	//页面卸载时切换为默认或者其他属性
		onUnload() {
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('default');
			// #endif
		},
相关推荐
七七小报3 小时前
uniapp-商城-38-shop 购物车 选好了 进行订单确认4 配送方式1
uni-app
七七小报5 小时前
uniapp-商城-39-shop 购物车 选好了 进行订单确认4 配送方式2 地址页面
uni-app
G_GreenHand6 小时前
uniapp 仿小红书轮播图效果
uni-app
性野喜悲8 小时前
uniapp返回上一页接口数据更新了,页面未更新
uni-app
冰镇生鲜9 小时前
小程序·安全·胶囊·容器组件
前端·vue.js·uni-app
盛夏绽放10 小时前
uni-app云开发总结
uni-app·云开发
halo141610 小时前
uni-app 小程序中的定位问题 以及 页面安全距离
小程序·uni-app
资深前端之路10 小时前
iphonex uniapp textarea标签兼容性处理过程梳理
uni-app
xx24061 天前
UniApp学习笔记
uni-app
七七小报1 天前
uniapp-商城-36-shop 购物车 选好了 进行订单确认2 支付方式颜色变化和颜色滤镜filter
uni-app