在小程序中实现横竖屏切换的配置方法,实时监听页面宽度

在小程序中实现横竖屏切换的配置方法:

1. 全局配置

在app.json中添加:

{

"resizable": true,

"pageOrientation": "auto"

}

2.页面级配置

在对应页面的.json文件中设置:

{

"pageOrientation": "landscape" // 强制横屏

// 或 "portrait" 强制竖屏

// 或 "auto" 跟随手机自动 横屏/竖屏

}

参数说明:

resizable:开启屏幕旋转支持(基础库2.4.0+)

pageOrientation:控制显示方向(auto/自适应,landscape/横屏,portrait/竖屏)

注意事项:

1 需在代码中监听onResize事件处理布局适配

2 横屏模式下需自行处理导航栏适配问题

3 部分安卓设备需开启系统自动旋转功能

参考文档:
框架/小程序配置
视图层/响应显示区域变化

3. 监听onWindowResize事件处理布局适配

javascript 复制代码
 wx.onWindowResize(function(res){
	console.log(res)	
 })

 // 取消监听窗口尺寸变化事件
 wx.offWindowResize()
相关推荐
每天都要加油呀!14 小时前
TypeError: uni.requestPayment is not a function
小程序
java1234_小锋15 小时前
分享一套优质的微信小程序校园志愿者系统(SpringBoot后端+Vue3管理端)
微信小程序·小程序·校园志愿者
2501_9160088916 小时前
深入解析iOS机审4.3原理与混淆实战方法
android·java·开发语言·ios·小程序·uni-app·iphone
打破砂锅问到底00716 小时前
AI 驱动开发实战:10分钟从零构建「微信群相册」小程序
人工智能·微信·小程序·ai编程
CHU72903517 小时前
扭蛋机盲盒小程序前端功能设计解析:打造趣味与惊喜并存的消费体验
前端·小程序
QT.qtqtqtqtqt17 小时前
uni-app小程序前端开发笔记(更新中)
前端·笔记·小程序·uni-app
CHU72903519 小时前
直播商城APP前端功能全景解析:打造沉浸式互动购物新体验
java·前端·小程序
黑客老李1 天前
web渗透实战 | js.map文件泄露导致的通杀漏洞
安全·web安全·小程序·黑客入门·渗透测试实战
游戏开发爱好者82 天前
日常开发与测试的 App 测试方法、查看设备状态、实时日志、应用数据
android·ios·小程序·https·uni-app·iphone·webview
2501_915106322 天前
app 上架过程,安装包准备、证书与描述文件管理、安装测试、上传
android·ios·小程序·https·uni-app·iphone·webview