uniapp APP和微信小程序横屏模式实现代码
作者:暮色微凉
时间:2026-07-23
浏览:3
在 uni-app 里处理横屏场景,其实就三种方式:全局配置、页面级配置、运行时通过按钮切换。下面直接拆开来讲。先说一个基础操作:在 pages.json 里做全局配置。加上这段配置,整个应用就能根据设备方向自动切换横竖屏。"globalStyle": { "na vigationBarTextSt
本文目录
在 uni-app 里处理横屏场景,其实就三种方式:全局配置、页面级配置、运行时通过按钮切换。下面直接拆开来讲。
先说一个基础操作:在 pages.json 里做全局配置。加上这段配置,整个应用就能根据设备方向自动切换横竖屏。
"globalStyle": {
"na vigationBarTextStyle": "black",
"na vigationBarTitleText": "uni-app",
"na vigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"pageOrientation": "auto" //横屏配置 auto自动 | portrait竖屏 | landscape横屏
}然后是微信小程序的横屏设置。如果希望某个页面一打开就自动横屏,可以在 pages.json 的页面配置里单独声明:
{
"path": "pages/native/demo",
"style": {
"na vigationBarTitleText": "横屏模式",
"enablePullDownRefresh": false,
"backgroundTextStyle": "dark",
"mp-weixin": {
"pageOrientation": "landscape" //auto:自动,landscape:横屏,portrait :竖屏
}
}
}页面代码实现
/pages/native/demo页面
跳转成功
总结
整体来看,uni-app 的横屏处理逻辑很清晰:全局配置管所有页面,页面级配置管单个页面,按钮切换则是在运行时动态控制。需要注意的一点是,页面退出时最好把屏幕方向恢复默认,不然用户退出后屏幕还是横的,体验就有点尴尬了。
作者最新文章
PDF怎么按页拆成单独文件?PDF按页拆分后怎么命名
2026-11-03 18:00
长网页转PDF怎么避免断图?网页转PDF怎么设置分页
2026-11-01 09:31
夸克资源库蓝光资源每日更新经典电视剧全集
2026-10-30 11:54
会声会影怎么导入音频 支持格式及步骤
2026-10-29 12:23
WPS表格常用功能实操:从录入到排序筛选的完整流程
2026-10-29 09:57
下一篇:
Vue模板中保留HTML注释的方法大全
热门文章
更多
精品专题
更多
Mac软件
更多
WINDOWS
更多

































