Material Design 中的列表项滑动删除效果实现教程-JavaScript中文网-JavaScript教程资源分享门户

Material Design 是 Google 推出的一种设计语言，旨在提供一种现代、干净、直观的设计风格，以提高用户体验。在 Material Design 中，列表项滑动删除是一种常用的交互效果。本文将介绍如何通过 HTML、CSS 和 JavaScript 实现 Material Design 中的列表项滑动删除效果。

实现步骤

第一步：HTML 结构

我们需要先创建一个列表，每个列表项都有一个删除按钮。HTML 结构如下：

<ul class="list">
  <li class="list-item">
    <div class="list-item-content">列表项 1</div>
    <div class="list-item-action">
      <button class="delete-btn">删除</button>
    </div>
  </li>
  <li class="list-item">
    <div class="list-item-content">列表项 2</div>
    <div class="list-item-action">
      <button class="delete-btn">删除</button>
    </div>
  </li>
  <li class="list-item">
    <div class="list-item-content">列表项 3</div>
    <div class="list-item-action">
      <button class="delete-btn">删除</button>
    </div>
  </li>
</ul>

第二步：CSS 样式

接下来，我们需要为列表项和删除按钮添加样式。我们使用 Flexbox 布局来使列表项和删除按钮水平排列。CSS 样式如下：

.list {
  list-style: none;
  padding: 0;
}

.list-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.list-item-content {
  flex: 1;
}

.list-item-action {
  display: flex;
  align-items: center;
}

.delete-btn {
  background-color: #f44336;
  color: #fff;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

第三步：JavaScript 代码

最后，我们需要使用 JavaScript 来实现列表项滑动删除效果。我们使用 touchstart、touchmove 和 touchend 事件来实现滑动效果。具体实现方法如下：

const listItems = document.querySelectorAll('.list-item');

listItems.forEach((item) => {
  let startX = 0;
  let startY = 0;
  let distX = 0;
  let distY = 0;
  let threshold = 100; // 滑动阈值
  let distThreshold = 0.3; // 滑动距离阈值
  let isDragging = false;

  item.addEventListener('touchstart', (e) => {
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
  });

  item.addEventListener('touchmove', (e) => {
    if (!startX || !startY || isDragging) {
      return;
    }

    distX = e.touches[0].clientX - startX;
    distY = e.touches[0].clientY - startY;

    if (Math.abs(distX) > threshold && Math.abs(distY) < threshold) {
      isDragging = true;
      item.style.transform = `translateX(${distX}px)`;
    }
  });

  item.addEventListener('touchend', (e) => {
    if (!startX || !startY || !isDragging) {
      return;
    }

    if (Math.abs(distX) > item.offsetWidth * distThreshold) {
      item.remove();
    } else {
      item.style.transform = '';
    }

    startX = 0;
    startY = 0;
    distX = 0;
    distY = 0;
    isDragging = false;
  });
});

示例代码

完整的 HTML、CSS 和 JavaScript 代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Material Design 中的列表项滑动删除效果</title>
    <style>
      .list {
        list-style: none;
        padding: 0;
      }

      .list-item {
        display: flex;
        align-items: center;
        padding: 16px;
        border-bottom: 1px solid #eee;
      }

      .list-item-content {
        flex: 1;
      }

      .list-item-action {
        display: flex;
        align-items: center;
      }

      .delete-btn {
        background-color: #f44336;
        color: #fff;
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <ul class="list">
      <li class="list-item">
        <div class="list-item-content">列表项 1</div>
        <div class="list-item-action">
          <button class="delete-btn">删除</button>
        </div>
      </li>
      <li class="list-item">
        <div class="list-item-content">列表项 2</div>
        <div class="list-item-action">
          <button class="delete-btn">删除</button>
        </div>
      </li>
      <li class="list-item">
        <div class="list-item-content">列表项 3</div>
        <div class="list-item-action">
          <button class="delete-btn">删除</button>
        </div>
      </li>
    </ul>

    <script>
      const listItems = document.querySelectorAll('.list-item');

      listItems.forEach((item) => {
        let startX = 0;
        let startY = 0;
        let distX = 0;
        let distY = 0;
        let threshold = 100; // 滑动阈值
        let distThreshold = 0.3; // 滑动距离阈值
        let isDragging = false;

        item.addEventListener('touchstart', (e) => {
          startX = e.touches[0].clientX;
          startY = e.touches[0].clientY;
        });

        item.addEventListener('touchmove', (e) => {
          if (!startX || !startY || isDragging) {
            return;
          }

          distX = e.touches[0].clientX - startX;
          distY = e.touches[0].clientY - startY;

          if (Math.abs(distX) > threshold && Math.abs(distY) < threshold) {
            isDragging = true;
            item.style.transform = `translateX(${distX}px)`;
          }
        });

        item.addEventListener('touchend', (e) => {
          if (!startX || !startY || !isDragging) {
            return;
          }

          if (Math.abs(distX) > item.offsetWidth * distThreshold) {
            item.remove();
          } else {
            item.style.transform = '';
          }

          startX = 0;
          startY = 0;
          distX = 0;
          distY = 0;
          isDragging = false;
        });
      });
    </script>
  </body>
</html>

总结

本文介绍了如何通过 HTML、CSS 和 JavaScript 实现 Material Design 中的列表项滑动删除效果。通过本文的学习，我们可以了解到如何使用 Flexbox 布局和 touch 事件来实现该效果，以及如何通过阈值来判断是否触发删除操作。这对于提高 Web 开发者的交互设计能力和用户体验水平都有一定的指导意义。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658e3b5feb4cecbf2d40dc2d