js实现触摸下拉列表

实现触摸下拉列表的基本思路

使用JavaScript监听触摸事件（touchstart、touchmove、touchend），结合CSS过渡或动画实现下拉效果。核心是通过计算触摸位移控制列表的移动。

HTML结构示例

<div class="pull-down-container">
  <div class="pull-down-content">
    <!-- 列表内容 -->
    <ul>
      <li>项目1</li>
      <li>项目2</li>
      <li>项目3</li>
    </ul>
  </div>
</div>

CSS样式基础

.pull-down-container {
  overflow: hidden;
  position: relative;
  height: 300px; /* 固定容器高度 */
}

.pull-down-content {
  position: relative;
  transition: transform 0.3s ease; /* 平滑过渡效果 */
}

JavaScript实现逻辑

const container = document.querySelector('.pull-down-container');
const content = document.querySelector('.pull-down-content');
let startY = 0;
let currentY = 0;

content.addEventListener('touchstart', (e) => {
  startY = e.touches[0].clientY;
  currentY = content.getBoundingClientRect().top;
});

content.addEventListener('touchmove', (e) => {
  const y = e.touches[0].clientY;
  const diff = y - startY;

  // 只允许下拉操作
  if (diff > 0) {
    content.style.transform = `translateY(${diff}px)`;
  }
});

content.addEventListener('touchend', (e) => {
  const y = e.changedTouches[0].clientY;
  const diff = y - startY;

  // 下拉距离超过阈值时触发刷新
  if (diff > 100) {
    content.style.transform = 'translateY(100px)';
    // 模拟数据加载
    setTimeout(() => {
      content.style.transform = 'translateY(0)';
      // 这里添加数据加载逻辑
    }, 1000);
  } else {
    content.style.transform = 'translateY(0)';
  }
});

进阶优化方向

添加下拉提示元素

<div class="pull-down-refresh">
  <span>下拉刷新</span>
</div>

动态改变提示文本

const refreshElement = document.querySelector('.pull-down-refresh');

content.addEventListener('touchmove', (e) => {
  // ...原有逻辑
  if (diff > 0) {
    refreshElement.textContent = diff > 100 ? '释放刷新' : '下拉刷新';
  }
});

添加弹性效果

.pull-down-content {
  /* 原有样式 */
  will-change: transform; /* 优化性能 */
}

注意事项

触摸事件需要处理多点触控情况，建议检查e.touches.length。移动端浏览器可能有默认下拉行为，需要调用e.preventDefault()阻止默认行为时需谨慎，可能影响页面其他滚动操作。

实现完整的下拉刷新功能时，需要与服务端配合处理数据加载逻辑。对于复杂场景，可以考虑使用现成的库如hammer.js处理手势操作。