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 选择 省市区 省市 以及 回显
大数据·elasticsearch·uni-app
耶啵奶膘15 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
我开心就好o1 天前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index1 天前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
初遇你时动了情1 天前
uniapp 城市选择插件
开发语言·javascript·uni-app
小小黑0071 天前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
草字1 天前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
前端小胡兔1 天前
uniapp rpx兼容平板
uni-app
荔枝吖1 天前
uniapp实现开发遇到过的问题(持续更新中....)
uni-app
艾小逗1 天前
uniapp将图片url转换成base64支持app和h5
uni-app·base64·imagetobase64