什么是 Snackbar
Snackbar 是 Material Design 中的一种用户提示组件，类似于 Toast，可以在屏幕底部显示短暂的消息。与 Toast 不同的是，Snackbar 可以包含操作按钮，用户可以在 Snackbar 上执行一些操作。
如何使用 Snackbar
在使用 Snackbar 之前，需要先引入 Material Design 的样式和 JavaScript 库。可以通过以下方式引入：
----- ---------------- --------------------------------------------------------------- ----- ---------------- ---------------------------------------------------------------------------------------- ------- ----------------------------------------------------------------------------------------------
引入之后，就可以在 HTML 中使用 Snackbar 了。以下是一个简单的示例：
------- --------------------------- -----------------
--------
-------- -------------- -
--- -------- - ------------------------------
-----------------------------------
-------------------- - ------- -----------
------------------------------------
--------------------- -
-------------------------------
-- ------
-
---------在这个示例中，我们通过 JavaScript 动态创建了一个 div 元素，并添加了 Material Design 中的 snackbar 样式。然后在点击按钮时，显示该 Snackbar。Snackbar 在 3 秒后自动消失。
Snackbar 的常见问题及解决方法
Snackbar 不显示
如果 Snackbar 不显示，可能是因为样式没有正确引入。请确保已经引入了 Material Design 的样式和 JavaScript 库。
另外，Snackbar 默认是隐藏的，需要添加 show 类才能显示。如果没有添加 show 类，Snackbar 就不会显示。以下是一个修复该问题的示例：
------- --------------------------- -----------------
--------
-------- -------------- -
--- -------- - ------------------------------
-----------------------------------
------------------------------- -- -- ---- -
-------------------- - ------- -----------
------------------------------------
--------------------- -
-------------------------------
-- ------
-
---------Snackbar 的操作按钮不响应
如果 Snackbar 包含操作按钮，但是点击操作按钮没有响应，可能是因为事件没有正确绑定。需要为操作按钮添加 click 事件处理函数，才能响应用户的操作。
以下是一个修复该问题的示例：
------- --------------------------- -----------------
--------
-------- -------------- -
--- -------- - ------------------------------
-----------------------------------
-------------------------------
-------------------- - ------- -----------
--- ------ - ---------------------------------
---------------------------------
-----------------------------------
------------------ - -------
-------------------------------- ---------- -
-- -------
---
-----------------------------
------------------------------------
--------------------- -
-------------------------------
-- ------
-
---------在这个示例中，我们为操作按钮添加了 click 事件处理函数，并在该函数中处理用户的操作。
总结
Snackbar 是 Material Design 中的一种用户提示组件，可以在屏幕底部显示短暂的消息，并包含操作按钮。在使用 Snackbar 时，需要引入 Material Design 的样式和 JavaScript 库，并正确设置样式和事件处理函数。如果遇到问题，可以参考本文提供的解决方法。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6578081ed2f5e1655d1dd2ae