uniapp toast样式更改

2024-04-21 00:29| 来源: 网络整理| 查看: 265

Uniapp 中的 Toast 是一个很方便的提示组件，使用起来非常简单。如果您需要更改 Toast 的样式，可以通过修改其 CSS 样式来实现。

首先，在您的项目中找到 uni.css 文件。这是 Uniapp 的全局样式文件，您可以在其中找到 Toast 的默认样式。在文件中搜索 ".uni-toast"，您会找到类似以下的样式代码：

.uni-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; padding: 10px 20px; border-radius: 5px; background-color: rgba(0, 0, 0, 0.8); color: #fff; font-size: 14px; }

您可以根据需要更改这些样式。例如，如果您想要更改 Toast 的背景颜色，您可以将 "background-color" 属性的值更改为您想要的颜色值，例如 "background-color: #FF0000;"。

另外，您还可以通过在调用 Toast 时传递参数来自定义 Toast 样式。例如，如果您想要更改 Toast 的背景颜色和文字颜色，您可以这样写：

uni.showToast({ title: '这是一个 Toast', icon: 'none', duration: 2000, mask: true, image: '', success: res => {}, fail: () => {}, complete: () => {}, // 自定义样式 cssClass: 'my-toast' });

在上面的代码中，我们添加了一个 "cssClass" 属性，它指定了一个名为 "my-toast" 的 CSS 类。您可以在样式文件中定义这个类，并为它指定您想要的样式。

.my-toast { background-color: #FF0000; color: #FFFFFF; }

这样，您就可以通过修改全局样式或传递参数来自定义 Toast 的样式了。

【本文地址】

公司简介

联系我们