如何改uni.showToast的icon颜色 成功的是绿色 失败的是红色

在uni-app中，如果你想改变` uni.showToast `组件提示框图标的颜色，这通常涉及到自定义通知样式。uni showToast本身不直接支持更改图标颜色，但它允许通过传递额外的参数来自定义显示效果。你可以尝试通过覆盖默认的CSS样式或者使用H5的`<custom-view>`标签来实现。

以下是一个简单的示例，如何通过JavaScript动态设置成功和失败状态下的图标颜色：

// 设置成功时（green）
uni.showToast({
  title: '操作成功',
  icon: 'success', // 使用内置图标名
  duration: 1500,
  successColor: '#00ff00', // 自定义绿色颜色
});

// 设置失败时（red）
uni.showToast({
  title: '操作失败',
  icon: 'error', // 使用内置图标名
  duration: 1500,
  successColor: '', // 如果不希望有成功的图标，可以留空
  failColor: '#ff0000', // 自定义红色颜色
});

然而，如果想要改变图标本身的形状和颜色，可能需要自定义`<custom-view>`，并且将图标作为背景图片，并控制其透明度和颜色。具体的实现可能会因项目的具体结构和需求而有所不同。

相关问题

uni.showToast 如何设置字体颜色

uni.showToast是uni-app框架中用于显示提示信息的方法。它可以在页面中弹出一个类似于Toast的提示框，显示一段文字，并在一定时间后自动消失。

要设置uni.showToast的字体颜色，可以通过在App.vue或者页面的样式文件中设置全局样式或者局部样式来实现。具体步骤如下：

1. 全局样式设置：
在App.vue文件中，可以通过<style>标签设置全局样式。例如，设置字体颜色为红色：

<style>
.toast-text {
  color: red;
}
</style>

然后，在uni.showToast的时候，通过设置`className`属性为`toast-text`来应用该样式：

uni.showToast({
  title: '提示信息',
  icon: 'none',
  duration: 2000,
  className: 'toast-text'
});

2. 局部样式设置：
在页面的样式文件（如xxx.vue文件中的style标签）中，可以设置局部样式。例如，设置字体颜色为蓝色：

<style>
.page-toast-text {
  color: blue;
}
</style>

然后，在uni.showToast的时候，通过设置`className`属性为`page-toast-text`来应用该样式：

uni.showToast({
  title: '提示信息',
  icon: 'none',
  duration: 2000,
  className: 'page-toast-text'
});

这样就可以根据需要设置uni.showToast的字体颜色了。

uni.showToast 如何提示失败

解决方案是使用setTimeout方法来异步队列调用uni.showToast来解决冲突。在请求接口后的逻辑中，可以使用setTimeout来延迟一段时间后执行uni.showToast来提示失败。例如，可以使用以下代码来实现：

var res = await postApi('****')
if (res.code == 1) {
  setTimeout(() => {
    uni.showToast({
      title: '保存成功!',
      icon: 'success'
    })
  }, 30)
  uni.navigateBack()
} else {
  setTimeout(() => {
    uni.showToast({
      title: '保存失败!'
    })
  }, 30)
}

通过使用setTimeout方法，你可以确保uni.showToast在uni.hideLoading之后执行，避免了冲突，从而成功地进行失败提示。