uni-app uni.showToast 提示的icon位置错误

uni-app uni.showToast 提示的icon位置错误

产品分类

uniapp/App

PC开发环境操作系统

Windows

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

22H2

HBuilderX类型

正式

HBuilderX版本号

4.83

手机系统

Android

手机系统版本号

Android 16

手机厂商

华为

手机机型

16pro

页面类型

vue

vue版本

vue2

打包方式

云端

项目创建方式

HBuilderX

App下载地址或H5网址

https://sale-test.profly.com.cn/

示例代码

uni.showToast({
title: '已添加',
icon: 'success',
duration: 1500
})
```

## 操作步骤
1

## 预期结果
2

## 实际结果
正常展示

## bug描述
showToast位置偏移了

![示例图片](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20251021/262cb1de61ba6431b2152da009f1f5f9.png)

更多关于uni-app uni.showToast 提示的icon位置错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

跑一下空白工程+标准基座是否正常？提供个复现工程说明问题。我测试 vue2+HBuilderX alpha4.83+Android 表现正常

更多关于uni-app uni.showToast 提示的icon位置错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html


您需要测试一下vue3 +Step

回复 1***@qq.com: 你不反馈的 vue2 问题吗？我测试 vue3+HBuilderX alpha 4.83+Android标准基座表现正常。如果你认为是个 bug 请提供复现工程

回复 DCloud_UNI_OttoJi: 已经解决了不好意思，我没有仔细看太忙了

在 uni-app 中使用 uni.showToast 时，图标位置偏移通常是由于样式兼容性问题或平台差异导致的。根据您提供的信息（Android 16、华为 16pro），以下是可能的原因和解决方案：

  1. 平台差异：Android 系统对 showToast 的渲染可能与 iOS 不同，尤其是在高版本系统或特定厂商设备上。华为设备可能存在自定义 UI 样式，影响图标位置。

  2. 样式覆盖：检查项目中是否有全局样式或第三方库覆盖了 showToast 的默认样式。可以通过在 App.vue 或页面样式中重置相关 CSS 来解决：

    .uni-toast {
  display: flex;
  align-items: center;
  justify-content: center;
}
回到顶部