在小程序中实现横竖屏切换的配置方法:
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()