Flexbox 实现移动端滑动卡片效果

卡片式布局在移动端设计中越来越流行，提升用户体验的同时也让页面更加美观。本文将介绍如何利用 Flexbox 实现移动端滑动卡片效果，并提供示例代码供大家参考。

什么是 Flexbox

Flexbox 是 CSS3 中新增的一种布局方式，也称为弹性盒子布局。它可以让元素更加灵活和自适应，可以很方便的实现常见的布局效果。

Flexbox 可以控制元素的排列顺序、间距、对齐等方面，同时也能够自适应不同的设备尺寸和屏幕方向。

实现移动端滑动卡片效果

以下是实现移动端滑动卡片效果的关键步骤。

1. 完整的卡片结构

一个完整的卡片应该包含以下几个元素：

• 卡片容器，用来容纳卡片中的内容；
• 卡片标题，用来显示卡片的标题；
• 卡片图片，用来展示卡片的图像；
• 卡片文字，用来展示卡片内容的文字。

<div class="card">
  <div class="card-title">卡片标题</div>
  <div class="card-image"><img src="card-image.jpg"></div>
  <div class="card-text">卡片内容文字</div>
</div>

2. 使用 Flexbox 布局

将卡片容器设置成 Flexbox 容器，使用 Flexbox 属性控制卡片的排列方式和对齐方式。

.card-container {
  display: flex; /* 将卡片容器设置成 Flexbox 容器 */
  justify-content: center; /* 居中对齐卡片 */
  align-items: center; /* 垂直对齐卡片 */
}

3. 实现滑动效果

在卡片容器上添加滑动事件，控制卡片移动的位置。可以利用 CSS3 的 transform 属性实现卡片的平移效果。

// javascriptcn.com 代码示例
var startX, startY, moveX, moveY, distanceX, distanceY;
var card = document.querySelector('.card');

// 开始触摸时记录位置
card.addEventListener('touchstart', function (e) {
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
});

// 触摸移动时计算距离并移动卡片
card.addEventListener('touchmove', function (e) {
  moveX = e.touches[0].clientX;
  moveY = e.touches[0].clientY;
  distanceX = moveX - startX;
  distanceY = moveY - startY;

  // 控制卡片移动的距离和方向
  var translateX = distanceX + 'px';
  var translateY = distanceY + 'px';
  card.style.transform = 'translate(' + translateX + ', ' + translateY + ')';
});

// 触摸结束时根据移动距离判断是保留还是删除卡片
card.addEventListener('touchend', function (e) {
  if (distanceX > 50) {
    // 向右滑动超过 50px，删除卡片
    card.style.transform = 'translate(200%, 0)';
    setTimeout(function () {
      card.parentNode.removeChild(card);
    }, 300);
  } else {
    // 滑动距离不够，保留卡片
    card.style.transform = 'translate(0, 0)';
  }
});

4. 实现动态添加卡片

可以利用 JavaScript 动态添加卡片，每次添加完后都要重新绑定滑动事件以实现滑动效果。

以下是一个添加卡片的示例代码：

// javascriptcn.com 代码示例
var cardContainer = document.querySelector('.card-container');

function addCard(title, imageUrl, content) {
  var card = document.createElement('div');
  card.classList.add('card');
  card.innerHTML = `
    <div class="card-title">${title}</div>
    <div class="card-image"><img src="${imageUrl}"></div>
    <div class="card-text">${content}</div>
  `;
  cardContainer.appendChild(card);
  
  card.addEventListener('touchstart', handleTouchStart);
  card.addEventListener('touchmove', handleTouchMove);
  card.addEventListener('touchend', handleTouchEnd);
}

示例代码

以下是一个完整的示例代码，你可以将其复制到你的项目中以实现移动端滑动卡片效果。

// javascriptcn.com 代码示例
<!-- CSS 样式 -->
<style>
  .card-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .card {
    position: relative;
    width: 80%;
    max-width: 400px;
    height: 200px;
    margin: 20px;
    border-radius: 8px;
    background-color: #eee;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-out;
  }

  .card-title {
    font-size: 24px;
    font-weight: bold;
    margin: 20px;
  }

  .card-image {
    height: 80%;
    overflow: hidden;
  }

  .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .card-text {
    font-size: 16px;
    padding: 20px;
  }
</style>

<!-- HTML 内容 -->
<div class="card-container">
  <!-- 卡片容器 -->
</div>

<!-- JavaScript 代码 -->
<script>
  // 获取卡片容器和添加按钮
  var cardContainer = document.querySelector('.card-container');
  var addButton = document.querySelector('.add-button');

  // 绑定添加按钮的点击事件
  addButton.addEventListener('click', function () {
    var title = '卡片标题';
    var imageUrl = 'https://picsum.photos/200/300';
    var content = '卡片内容文字';
    addCard(title, imageUrl, content);
  });

  // 绑定卡片的触摸事件
  function handleTouchStart(e) {
    this.startX = e.touches[0].clientX;
    this.startY = e.touches[0].clientY;
  }

  function handleTouchMove(e) {
    this.moveX = e.touches[0].clientX;
    this.moveY = e.touches[0].clientY;
    this.distanceX = this.moveX - this.startX;
    this.distanceY = this.moveY - this.startY;

    var translateX = this.distanceX + 'px';
    var translateY = this.distanceY + 'px';
    this.style.transform = 'translate(' + translateX + ', ' + translateY + ')';
  }

  function handleTouchEnd(e) {
    if (this.distanceX > 50) {
      this.style.transform = 'translate(200%, 0)';
      setTimeout(function () {
        this.parentNode.removeChild(this);
      }.bind(this), 300);
    } else {
      this.style.transform = 'translate(0, 0)';
    }
  }

  // 动态添加卡片的方法
  function addCard(title, imageUrl, content) {
    var card = document.createElement('div');
    card.classList.add('card');
    card.innerHTML = `
      <div class="card-title">${title}</div>
      <div class="card-image"><img src="${imageUrl}"></div>
      <div class="card-text">${content}</div>
    `;
    cardContainer.appendChild(card);

    card.addEventListener('touchstart', handleTouchStart);
    card.addEventListener('touchmove', handleTouchMove);
    card.addEventListener('touchend', handleTouchEnd);
  }
</script>

总结

本文介绍了如何利用 Flexbox 实现移动端滑动卡片效果，强调了实现过程中的关键步骤和需要注意的注意事项，并提供了示例代码让大家更好地理解和实践。

如果你想要学习更多前端开发技术，请持续关注我们的博客。

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