介绍
Bottom Sheet 是 Material Design 中一个非常重要的组件，可以让用户快速访问应用程序中的一些附加信息，如设置、选项或操作。Bottom Sheet 可以以两种不同的方式显示：模态和非模态。模态 Bottom Sheet 阻止用户对应用程序的其他部分进行交互，而非模态 Bottom Sheet 不会阻止用户对应用程序的其他部分进行交互。
在这篇文章中，我们将探讨 Bottom Sheet 的实现方法，并提供一些示例代码，帮助你了解如何在你的应用程序中实现此功能。
实现方法
1. 添加 Bottom Sheet
首先，我们需要在我们的应用程序中添加 Bottom Sheet。
<div class="bottom-sheet">
<div class="bottom-sheet-container">
<div class="bottom-sheet-content">
<!-- Bottom Sheet 内容放在这里 -->
</div>
</div>
</div>在上面的代码中，我们创建了一个名为“bottom-sheet”的 div 元素，表示包含 Bottom Sheet 的容器。我们还添加了两个子元素：一个名为“bottom-sheet-container”的 div 元素，表示 Bottom Sheet 的容器，以及一个名为“bottom-sheet-content”的 div 元素，表示 Bottom Sheet 的内容。
2. 添加样式
接下来，我们需要添加样式来实现 Bottom Sheet 的显示效果。
-- -------------------- ---- -------
------------- -
--------- ------
------- --
----- --
------ --
---- --
----------------- ------- -- -- -----
-------- ------
-------- --
----------- ------- ---- ------------
--------------- -----
-
-------------------- -
-------- --
--------------- -----
-
----------------------- -
--------- ---------
------- --
----- --
------ --
----------------- -----
------- -----
---------- -----------------
----------- --------- ---- ------------
-
-------------------- ----------------------- -
---------- ---------------
-
--------------------- -
-------- -----
-在上面的代码中，我们首先定义了 .bottom-sheet 类，用于定义 Bottom Sheet 的样式。我们设置了 Bottom Sheet 的位置为 fixed，同时使用了半透明背景颜色和一个比较大的 z-index 值，以确保 Bottom Sheet 始终在最上层。我们还将 Bottom Sheet 的初始透明度设置为 0，以及 pointer-events 设置为 none，以确保它不会与应用程序的其他部分进行交互。
我们还定义了 .bottom-sheet.active 类，用于在点击按钮时显示 Bottom Sheet。我们将透明度设置为 1，将 pointer-events 设置为 auto，以允许用户与应用程序的其他部分进行交互。
接下来，我们定义了 .bottom-sheet-container 类，用于定义 Bottom Sheet 所在的容器的样式。我们设置了容器的位置为 absolute，并将其设置在底部。我们设定了 Bottom Sheet 的初始高度为 50vh，并将容器的 transform 属性设置为 translateY(100%)，以将其向下移动并隐藏。
最后，我们定义了 .bottom-sheet.active .bottom-sheet-container 类，用于在点击按钮时将 Bottom Sheet 显示在屏幕上。我们将容器的 transform 属性设置为 translateY(0%)，以将其移动到屏幕底部。
3. 添加 JavaScript 代码
最后，我们需要添加一些 JavaScript 代码，以处理用户的交互事件。
const button = document.querySelector('#button');
const bottomSheet = document.querySelector('.bottom-sheet');
button.addEventListener('click', () => {
bottomSheet.classList.toggle('active');
});在上面的代码中，我们首先获取了按钮和 Bottom Sheet 的引用。然后我们使用 addEventListener 函数将按钮的 click 事件与一个函数绑定起来。在这个函数中，我们使用 classList.toggle 函数来切换 Bottom Sheet 的 active 类，实现它的显示和隐藏。
示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- -------------
-------
------------- -
--------- ------
------- --
----- --
------ --
---- --
----------------- ------- -- -- -----
-------- ------
-------- --
----------- ------- ---- ------------
--------------- -----
-
-------------------- -
-------- --
--------------- -----
-
----------------------- -
--------- ---------
------- --
----- --
------ --
----------------- -----
------- -----
---------- -----------------
----------- --------- ---- ------------
-
-------------------- ----------------------- -
---------- ---------------
-
--------------------- -
-------- -----
-
------- -
----------------- -----
------ -----
-------- -----
-------------- ----
-
--------
-------
------
------- -------------- ------ --------------
---- ---------------------
---- -------------------------------
---- -----------------------------
------ ------ ----- --------
-------- ----- ----- --- ----- ----------- ---------- ----- ---- ------- ------ -- ---- -------- - --------- ---- -----------
------
------
------
--------
----- ------ - ----------------------------------
----- ----------- - ----------------------------------------
-------------------------------- -- -- -
---------------------------------------
---
---------
-------
-------总结
在本文中，我们介绍了 Material Design 中的 Bottom Sheet 组件，并提供了实现此功能的详细代码示例。我希望这篇文章能对你的前端开发工作有所帮助，如果您对这方面有疑问，欢迎在下方评论区留言，我将尽快给予回复。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a5822948841e989420bdae