实现移动端touch事件的横向滑动列表效果

实现移动端touch事件的横向滑动列表效果可以使用以下步骤：

1. 创建一个容器，用于包含列表项。
2. 设置容器的样式，使其具有固定高度和宽度，并设置 overflow-x 属性为 scroll，这样就能实现横向滚动。
3. 创建列表项，并将其添加到容器中。
4. 使用 JavaScript 监听 touch 事件，判断手指在屏幕上的移动方向，并根据手指移动的距离来滚动列表。
5. 在 touchend 事件中，根据手指最后的位置来计算出列表项应该停留的位置，以实现平滑的滚动效果。

以下是一个示例代码：

HTML:

<div class="container">
  <div class="list">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
    <div class="item">Item 9</div>
    <div class="item">Item 10</div>
  </div>
</div>

CSS:

.container {
  height: 100px;
  width: 100%;
  overflow-x: scroll;
}

.list {
  height: 100%;
  white-space: nowrap;
}

.item {
  display: inline-block;
  height: 100%;
  width: 100px;
  background-color: #ccc;
  margin-right: 10px;
  text-align: center;
  line-height: 100px;
}

JavaScript:

var container = document.querySelector('.container');
var list = document.querySelector('.list');
var items = document.querySelectorAll('.item');
var startX, startY, distX, distY, startTime, endTime;
var threshold = 150;
var allowedTime = 300;
var elapsedTime, dist, speed;

container.addEventListener('touchstart', function(e) {
  startX = e.changedTouches[0].pageX;
  startY = e.changedTouches[0].pageY;
  startTime = new Date().getTime();
  e.preventDefault();
});

container.addEventListener('touchmove', function(e) {
  distX = e.changedTouches[0].pageX - startX;
  distY = e.changedTouches[0].pageY - startY;
  elapsedTime = new Date().getTime() - startTime;
  if (elapsedTime <= allowedTime && Math.abs(distX) > Math.abs(distY)) {
    e.preventDefault();
    list.style.transform = 'translateX(' + (-distX) + 'px)';
  }
});

container.addEventListener('touchend', function(e) {
  dist = Math.abs(distX);
  endTime = new Date().getTime();
  elapsedTime = endTime - startTime;
  speed = dist / elapsedTime;
  if (elapsedTime <= allowedTime && dist >= threshold) {
    if (distX > 0) {
      list.style.transform = 'translateX(0)';
    } else {
      list.style.transform = 'translateX(' + (-list.offsetWidth + container.offsetWidth) + 'px)';
    }
  } else {
    list.style.transform = 'translateX(' + (-list.offsetLeft) + 'px)';
  }
});

在这个示例代码中，我们首先获取了容器、列表和列表项元素，并定义了一些常量和变量。然后，我们使用 JavaScript 监听 touchstart、touchmove 和 touchend 事件，并在这些事件中实现了滚动列表的逻辑。具体来说，我们在 touchstart 事件中记录了手指的初始位置和时间；在 touchmove 事件中计算了手指移动的距离和时间，并通过设置列表的 transform 属性来实现滚动；在 touchend 事件中根据手指最后的位置和时间来计算出列表应该停留的位置，并实现了平滑的滚动效果。