uni-app uni.showLoading显示问题

uni-app uni.showLoading显示问题

示例代码：

uni.showLoading({  
    mask:true,  
});

操作步骤：

uni.showLoading({  
    mask:true,  
});

预期结果：

uni.showLoading({  
    mask:true,  
});

实际结果：

uni.showLoading({  
    mask:true,  
});

bug描述：

uni.showToast，uni.showLoading在苹果ipad横屏下展示出现问题，样式错乱，希望官方解决一下，修改uni-toast .uni-toast 样式也不能修改

示例图片

信息 描述
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.1.12
手机系统 iOS
手机系统版本号 IOS 14
手机厂商 苹果
手机机型 18832340439
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app uni.showLoading显示问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

这个是小程序官方问题，3年前的时候也碰到过，现在不知道解决没有
这种可以自己写一个组件loading就好了。

更多关于uni-app uni.showLoading显示问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你好，3.1.13+版本已修复了此问题，升级一下吧

这是一个已知的iOS横屏适配问题。在iPad横屏模式下，uni.showLoading和uni.showToast的定位计算会出现偏差，导致显示位置异常。

目前可以通过以下方式临时解决：

  1. 使用条件编译针对iOS横屏单独处理：
// #ifdef APP-PLUS
if(uni.getSystemInfoSync().platform === 'ios' && uni.getSystemInfoSync().windowWidth > uni.getSystemInfoSync().windowHeight) {
    // 横屏状态下使用其他提示方式
    uni.showModal({
        title: '提示',
        content: '加载中...'
    })
} else {
    uni.showLoading({
        mask: true
    })
}
// #endif

  1. 自定义loading组件替代原生API，通过CSS媒体查询适配横屏布局。

  2. 在页面onShow生命周期中监听横竖屏变化，动态调整提示框位置：

onShow() {
    uni.onWindowResize((res) => {
        if(res.size.windowWidth > res.size.windowHeight) {
            // 横屏处理逻辑
        }
    })
}
回到顶部