uni-app 横屏APP设置单页竖屏 样式错乱

uni-app 横屏APP设置单页竖屏 样式错乱

开发环境 版本号 项目创建方式
Windows win10 17763.914 HBuilderX 
# 操作步骤：

```javascript
onShow(){  
    plus.screen.lockOrientation('portrait-primary');//强制竖屏  
},  
onUnload() {  
    plus.screen.lockOrientation('landscape-primary');//强制横屏  
}

预期结果：

onShow(){  
    plus.screen.lockOrientation('portrait-primary');//强制竖屏  
},  
onUnload() {  
    plus.screen.lockOrientation('landscape-primary');//强制横屏  
}

实际结果：

第二次加载 横屏样式错乱

bug描述：

APP为平板定制应用 大部分页面横屏 只有一页是竖屏

app.vue

onLaunch: function() {  
    plus.screen.lockOrientation('landscape-primary'); //强制横屏  
},

A页[横屏]正常 => B页[横屏]正常 => C页[竖屏]正常

返回 C页[竖屏]正常 => B页[横屏]正常 => A页[横屏]正常 再次进入 => B页[横屏]样式错乱

返回页面样式正常 第二次加载就样式错乱 第三次加载则正常

C页竖屏写法为

onShow(){  
    plus.screen.lockOrientation('portrait-primary');//强制竖屏  
},  
onUnload() {  
    plus.screen.lockOrientation('landscape-primary');//强制横屏  
}

更多关于uni-app 横屏APP设置单页竖屏 样式错乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html

13 回复

顶一下 官方 还没解决吗

更多关于uni-app 横屏APP设置单页竖屏 样式错乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html


onShow(){

setTimeout(()=>{

// 为什么要延迟横屏，再加载weView呢？

// 那是因为，uni-app转安卓有个很严重的bug。这个单个页面需要强制横屏，在onLoad,onReady,onShow阶段横屏都会导致它之前或者之后的页面产生布局异常（无解）

// 所以必须延迟等这个页面所有东西加载完成了，再设置横屏。所以设置了延迟800毫秒再横屏。

plus.screen.lockOrientation(‘landscape-primary’)

// 但是wb-view也需要在加载资源的时候获取横屏的宽高来进行布局。所以为了获取到的是横屏后的宽高，也要在横屏后再渲染web-view

this.canStartWeb = true

},1000)

},

没有人给解决吗？

这是一个uni-app中横竖屏切换导致的样式渲染问题。核心原因是屏幕方向切换时，页面布局没有及时重新计算。

解决方案建议：

  1. 在横竖屏切换时，强制触发页面重绘：
onShow(){
    plus.screen.lockOrientation('portrait-primary');
    // 添加重绘逻辑
    this.$nextTick(() => {
        window.dispatchEvent(new Event('resize'));
    });
}
  1. 或者在manifest.json中配置全局横屏，仅对特定页面设置竖屏：
"app-plus": {
    "screenOrientation": ["landscape-primary"]
}

  1. 检查页面样式是否使用了固定尺寸，建议改用响应式单位（如rpx）或百分比布局。

  2. 在页面生命周期中添加resize事件监听：

onLoad() {
    window.addEventListener('resize', this.handleResize);
},
onUnload() {
    window.removeEventListener('resize', this.handleResize);
},
methods: {
    handleResize() {
        // 处理布局调整
    }
}
回到顶部