自定义滑动单元格：不依赖插件

前端

2023-12-16 12:05:53

在现代网页开发中，互动式元素已成为用户体验中不可或缺的一部分。其中，滑动单元格作为一种常见的导航组件，因其简洁、灵活的特点备受青睐。然而，依赖第三方插件来实现滑动单元格不仅会增加页面加载时间，还可能带来维护和兼容性方面的挑战。

本文将介绍如何通过原生 JavaScript 和 CSS 实现一个简单易用的滑动单元格，从而摆脱插件的束缚，实现更灵活、更轻量级的用户交互。

理解滑动单元格的工作原理

滑动单元格本质上是一个包含可滚动的子元素的容器。当用户与滑动单元格交互（例如单击或触摸）时，容器会通过改变子元素的位置来模拟滚动效果。

为了实现这一点，我们将利用 CSS 的 transform 属性，该属性允许我们平移、旋转和缩放元素。通过不断修改子元素的 transform 值，我们可以模拟平滑的滑动效果。

HTML 结构

首先，我们需要创建一个包含滑动单元格的 HTML 结构：

<div class="container">
  <div class="slider">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</div>

其中，<div class="container"> 是滑动单元格的容器，<div class="slider"> 是滑动单元格本身，<div class="item"> 是滑动单元格内的单个子元素（可滚动内容）。

CSS 样式

接下来，我们需要定义滑动单元格的 CSS 样式：

.container {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slider {
  display: flex;
  flex-direction: row;
  transition: transform 0.5s ease-in-out;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 0 10px;
}

.container 定义了滑动单元格的尺寸和溢出属性（overflow: hidden）。
.slider 定义了滑动单元格的布局（水平排列）和过渡效果（平滑滚动）。
.item 定义了单个子元素的外观和间距。

JavaScript 实现

现在，让我们编写 JavaScript 代码来处理滑动单元格的交互：

const slider = document.querySelector('.slider');
const items = document.querySelectorAll('.item');

let currentIndex = 0;
let startX;
let isDragging = false;

items.forEach((item, index) => {
  item.addEventListener('mousedown', (e) => {
    startX = e.clientX;
    isDragging = true;
  });
});

window.addEventListener('mousemove', (e) => {
  if (!isDragging) return;

  const diffX = startX - e.clientX;
  const newTranslateX = currentIndex * -100 + diffX;
  slider.style.transform = `translateX(${newTranslateX}px)`;
});

window.addEventListener('mouseup', () => {
  isDragging = false;

  // 确定滑动方向并更新当前索引
  const translateX = Number(slider.style.transform.split('(')[1].split('px')[0]);
  currentIndex = Math.round(-translateX / 100);
});