uniapp的showToast背景色

在uniapp中，可以通过在showToast方法中传入一个对象参数来设置Toast的样式，其中包括background颜色属性，例如：

uni.showToast({
  title: 'Hello, World!',
  icon: 'none',
  duration: 2000,
  background: '#ff0000' // 设置背景色为红色
})

你可以将background属性设置为任何CSS颜色值，包括十六进制、RGB、RGBA等。

相关问题

uniapp showToast

引用引用引用<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [跨平台应用开发进阶(七) ：uni-app 自定义 showToast](https://blog.csdn.net/sunhuaqiang1/article/details/123150420)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [uniapp 提示框(showToast、showModal、showLoading)](https://blog.csdn.net/weixin_44504531/article/details/127145134)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [uniapp showToast](https://blog.csdn.net/hu1628299958/article/details/114694214)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]

uniapp showtoast 样式修改

你可以通过修改全局样式或者在单个页面中的样式来修改 `uni.showToast` 的样式。

1. 全局样式

在 `App.vue` 中的 `style` 标签中添加以下样式：

/* uni.showToast 样式修改 */
.uni-toast__text {
  color: #fff; /* 文本颜色 */
  background-color: rgba(0, 0, 0, 0.7); /* 背景颜色 */
  border-radius: 4px; /* 圆角 */
  padding: 10px 16px; /* 内边距 */
}

2. 单个页面样式

在需要修改样式的页面中的 `style` 标签中添加以下样式：

/* uni.showToast 样式修改 */
.custom-toast__text {
  color: #fff; /* 文本颜色 */
  background-color: rgba(0, 0, 0, 0.7); /* 背景颜色 */
  border-radius: 4px; /* 圆角 */
  padding: 10px 16px; /* 内边距 */
}

然后在触发 `uni.showToast` 的地方，添加 `icon` 和 `mask` 参数，并在 `success` 回调函数中添加以下代码：

uni.showToast({
  title: '这是一条提示信息',
  icon: 'none',
  mask: true,
  success() {
    const toast = document.querySelector('.uni-toast__text');
    if (toast) {
      toast.classList.add('custom-toast__text');
    }
  }
})

这样就可以通过添加自定义样式类来修改 `uni.showToast` 的样式了。