首先在pages.json下新增代码：
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"pageOrientation": "auto" //横屏配置 auto自动 | portrait竖屏 | landscape横屏
},
微信小程序横屏：
在pages.json下添加代码（进入页面自动横横屏）：
{
"path": "pages/native/demo",
"style": {
"navigationBarTitleText": "横屏模式",
"enablePullDownRefresh": false,
"backgroundTextStyle": "dark",
"mp-weixin": {
"pageOrientation": "landscape" //auto:自动，landscape：横屏，portrait ：竖屏
}
}
}
页面代码实现：
import {
ref,
reactive,
watch,
onMounted,
} from "vue"
import {
onLoad,
onReady,
onUnload
} from '@dcloudio/uni-app'
// 切换模式
const onCrosswise = (mode) => {
if (mode == 'default') {
// #ifdef APP-PLUS
plus.screen.lockOrientation('default'); // 默认横竖屏切换
// #endif
} else if (mode == 'portrait') {
// #ifdef APP-PLUS
plus.screen.lockOrientation('portrait-primary'); // 竖屏展示
// #endif
} else {
uni.navigateTo({
url: "/pages/native/demo",
success: function(res) {
// #ifdef APP-PLUS
plus.screen.lockOrientation('landscape-primary'); // 强制横屏
// #endif
}
})
}
}
/pages/native/demo页面：
跳转成功
import {
onLoad,
onReady,
onUnload
} from '@dcloudio/uni-app'
//页面卸载时切换为默认或者其他属性
onUnload(() => {
{
// #ifdef APP-PLUS
plus.screen.lockOrientation('default');
// #endif
}
})
总结
到此这篇关于uniapp APP和微信小程序横屏模式的文章就介绍到这了,更多相关uniapp APP和小程序横屏模式内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
