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

实现移动端touch事件的横向滑动列表效果可以使用原生的JavaScript和CSS3来实现。

首先，我们需要在HTML中创建一个容器元素，用来包含列表项。容器元素需要设置overflow-x属性为scroll，使得内容超出容器范围时可以滚动。

<div class="container">
  <ul class="list">
    <li>项1</li>
    <li>项2</li>
    <li>项3</li>
    <li>项4</li>
    <li>项5</li>
  </ul>
</div>

然后，在CSS中，我们需要设置容器元素和列表项的样式，以及使用CSS3的transition属性来实现平滑的过渡效果。

.container {
  width: 100%;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch; /* 添加iOS滚动效果 */
}

.list {
  display: flex;
  flex-wrap: nowrap; /* 设置列表项不换行 */
  transition: transform 0.3s ease; /* 添加平滑的过渡效果 */
}

.list li {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  background-color: #ccc;
}

最后，在JavaScript中，我们需要监听容器元素的touchstart、touchmove和touchend事件，计算滑动距离并通过改变列表项的transform属性来实现横向滑动效果。

const container = document.querySelector('.container');
const list = document.querySelector('.list');
let isDragging = false;
let startPosition = 0;
let currentTranslate = 0;
let prevTranslate = 0;
let animationId = 0;

container.addEventListener('touchstart', touchStart);
container.addEventListener('touchmove', touchMove);
container.addEventListener('touchend', touchEnd);
container.addEventListener('touchcancel', touchEnd);

function touchStart(event) {
  if (event.target.classList.contains('list')) {
    isDragging = true;
    startPosition = event.touches[0].clientX;
    animationId = requestAnimationFrame(updateAnimation);
    container.classList.add('grabbing');
  }
}

function touchMove(event) {
  if (isDragging) {
    const currentPosition = event.touches[0].clientX;
    currentTranslate = prevTranslate + currentPosition - startPosition;
  }
}

function touchEnd() {
  isDragging = false;
  cancelAnimationFrame(animationId);
  prevTranslate = currentTranslate;
  container.classList.remove('grabbing');
}

function updateAnimation() {
  list.style.transform = `translateX(${currentTranslate}px)`;
  animationId = requestAnimationFrame(updateAnimation);
}

通过以上代码，我们就成功地实现了移动端touch事件的横向滑动列表效果。