酷炫实现：模仿淘宝侧滑删除你的购物车宝贝！

2023-10-22 04:30:55

前言

在当今快节奏的电子商务世界中，用户体验至关重要。让购物过程尽可能顺畅、高效是电子商务网站面临的一项关键挑战。淘宝等领先平台已将侧滑删除功能集成到其购物车中，为用户提供了无缝且直观的体验。

在这篇教程中，我们将踏上一次旅程，创建一个自己的侧滑删除购物车功能，模仿淘宝的设计和交互。我们将深入了解CSS和JavaScript的机制，一步一步构建这个实用且美观的特性。无论你是前端开发新手还是经验丰富的从业者，本教程都旨在为你提供一个清晰的指南，让你创建自己的购物车侧滑删除功能。

CSS动画

我们的侧滑删除功能的核心是CSS动画。我们将利用CSS的transform属性来平滑地将购物车项滑动到一侧。这里是如何实现它：

.cart-item {
  transition: transform 0.3s ease-in-out;
}

.cart-item--deleted {
  transform: translateX(-100%);
}

在这个CSS代码中，我们首先为.cart-item类设置了一个平滑的过渡效果，该类表示我们的购物车项。然后，我们为.cart-item--deleted类定义了一个translateX转换，它将购物车项向左滑动100%，从而使其消失在视图中。

JavaScript交互

接下来，我们需要处理用户与购物车项的交互。我们将使用JavaScript来检测手势并触发CSS动画。以下是具体步骤：

// 获取购物车项元素
const cartItems = document.querySelectorAll('.cart-item');

// 循环每个购物车项
cartItems.forEach((item) => {
  // 添加触摸事件侦听器
  item.addEventListener('touchstart', (e) => {
    // 获取手指开始触摸的位置
    startX = e.touches[0].clientX;
  });

  // 添加触摸移动事件侦听器
  item.addEventListener('touchmove', (e) => {
    // 计算手指移动的距离
    deltaX = e.touches[0].clientX - startX;

    // 如果手指向左移动超过一定阈值，则触发删除动画
    if (deltaX < -50) {
      item.classList.add('cart-item--deleted');
    }
  });

  // 添加触摸结束事件侦听器
  item.addEventListener('touchend', () => {
    // 如果手指向左移动超过一定阈值，则移除购物车项
    if (deltaX < -50) {
      item.remove();
    } else {
      // 否则，重置购物车项的转换
      item.classList.remove('cart-item--deleted');
    }
  });
});

在这段JavaScript代码中，我们首先获取所有购物车项元素。然后，我们为每个购物车项添加三个事件侦听器：touchstart、touchmove和touchend。

在touchstart事件侦听器中，我们获取手指开始触摸的位置。在touchmove事件侦听器中，我们计算手指移动的距离。如果手指向左移动超过一定阈值（在本例中为50px），则我们触发CSS删除动画。

在touchend事件侦听器中，我们检查手指是否向左移动超过阈值。如果是，我们从DOM中删除购物车项。否则，我们重置购物车项的转换。

完整实现

现在，我们已经涵盖了CSS动画和JavaScript交互，让我们将它们组合在一起以创建完整的侧滑删除功能：

HTML：

<div class="cart-item">
  <div class="cart-item__image">
    <img src="product-image.jpg" alt="Product Image">
  </div>
  <div class="cart-item__info">
    <p class="cart-item__name">Product Name</p>
    <p class="cart-item__price">$10.00</p>
  </div>
</div>

CSS：

.cart-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: transform 0.3s ease-in-out;
}

.cart-item--deleted {
  transform: translateX(-100%);
}

JavaScript：

const cartItems = document.querySelectorAll('.cart-item');

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

  item.addEventListener('touchmove', (e) => {
    deltaX = e.touches[0].clientX - startX;

    if (deltaX < -50) {
      item.classList.add('cart-item--deleted');
    }
  });

  item.addEventListener('touchend', () => {
    if (deltaX < -50) {
      item.remove();
    } else {
      item.classList.remove('cart-item--deleted');
    }
  });
});