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

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

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()
相关推荐
说私域12 小时前
开源链动2+1模式商城小程序在深度分销数字化转型中的应用研究
人工智能·小程序·开源·流量运营·私域运营
咖啡の猫13 小时前
微信小程序案例 - 自定义 tabBar
微信小程序·小程序·notepad++
咖啡の猫13 小时前
微信小程序全局数据共享
微信小程序·小程序
桐溪漂流14 小时前
微信小程序cli脚本预览上传
微信小程序·小程序
咖啡の猫14 小时前
微信小程序使用 npm 包
微信小程序·小程序·npm
说私域14 小时前
开源链动2+1模式商城小程序的营销技术与私域运营策略研究
人工智能·小程序·开源·流量运营·私域运营
小小王app小程序开发1 天前
淘宝扭蛋机小程序核心玩法拆解与技术运营分析
大数据·小程序
说私域1 天前
AI智能名片商城小程序数据清洗的持续运营策略与实践研究
大数据·人工智能·小程序·流量运营·私域运营
东东5161 天前
xxx食堂移动预约点餐系统 (springboot+微信小程序)
spring boot·微信小程序·小程序·毕业设计·个人开发·毕设
CHU7290351 天前
一番赏盲盒抽卡机小程序:解锁惊喜体验与社交乐趣的多元功能设计
前端·小程序·php