uni-app nvue iOS设备横屏应用的 uni.showToast 和uni.showLoad 显示错误

uni-app nvue iOS设备横屏应用的 uni.showToast 和uni.showLoad 显示错误

开发环境 版本号 项目创建方式
Windows 20H2 HBuilderX
3.1.11 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：20H2

HBuilderX类型：正式

HBuilderX版本号：3.1.11

手机系统：iOS

手机系统版本号：IOS 14

手机厂商：苹果

手机机型：iPad mini 4

页面类型：nvue

打包方式：云端

App下载地址或H5网址：[*](//ask.dcloud.net.cn/*)

### 操作步骤：

代码:
```json
"globalStyle": {
    "navigationStyle": "custom",
    "pageOrientation": "landscape"
}

*.nvue:

uni.showToast({title: 'The name is empty !', icon: 'none'})

预期结果：

正常显示

实际结果：

显示错误
文字和图标会按照竖屏方向显示;
loading遮盖层显示位置正常;
toast遮盖层宽度没有被正常撑开,高度会变得很奇怪

bug描述：

uni.showToast 和uni.showLoad 显示错误

iOS横屏应用,显示错误
iOS竖屏显示正常
Android横屏显示正常


更多关于uni-app nvue iOS设备横屏应用的 uni.showToast 和uni.showLoad 显示错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

这问题没人解决吗？

更多关于uni-app nvue iOS设备横屏应用的 uni.showToast 和uni.showLoad 显示错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html


不知道，我已经好几年没用uniapp了

在 nvue iOS 横屏模式下，uni.showToast 和 uni.showLoading 确实存在显示异常问题，这主要是由于系统坐标系和渲染机制差异导致的。

问题分析：

  1. iOS 横屏时，系统坐标系未正确适配 nvue 页面的横屏布局
  2. Toast 和 Loading 组件在横屏下仍按竖屏逻辑计算位置和尺寸
  3. 遮盖层宽度计算异常，高度显示错误

解决方案：

  1. 临时修复方案 - 使用条件编译针对 iOS 横屏单独处理：
// 检测横屏状态
const isLandscape = uni.getSystemInfoSync().windowWidth > uni.getSystemInfoSync().windowHeight

if (isLandscape && uni.getSystemInfoSync().platform === 'ios') {
  // 使用自定义 Toast 替代
  this.showCustomToast('The name is empty !')
} else {
  uni.showToast({
    title: 'The name is empty !', 
    icon: 'none'
  })
}
  1. 自定义 Toast 组件 - 创建横屏专用的 Toast：
methods: {
  showCustomToast(title) {
    // 通过绝对定位自定义 Toast 位置
    // 根据横屏尺寸重新计算显示位置
  }
}
  1. 配置调整 - 检查页面配置： 确保在 pages.json 中正确设置横屏方向：
{
  "path": "pages/your-page",
  "style": {
    "pageOrientation": "landscape"
  }
}
回到顶部