uniapp的showToast背景色

在uniapp中，可以通过设置toast的css样式来改变背景色。具体步骤如下：

1. 在uniapp中新建一个css文件，例如toast.css

2. 在toast.css文件中添加以下代码：

.custom-toast {
    background-color: #f00;  // 设置背景色为红色
}

3. 在需要使用toast的页面中引入该css文件：

<template>
  <view>
    <button @click="showToast">点击显示toast</button>
  </view>
</template>

<script>
  export default {
    methods: {
      showToast() {
        uni.showToast({
          title: '这是一个toast',
          icon: 'none',
          duration: 2000,
          cssClass: 'custom-toast'  // 设置toast的css类名为custom-toast
        })
      }
    }
  }
</script>

<style>
  @import url('toast.css');
</style>

这样就可以将toast的背景色设置为红色了。

相关问题

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` 的样式了。