Drag Back 交互实现指南

什么是 Drag Back？

“Drag Back”是一种在移动端常见的导航交互方式：用户从屏幕左侧边缘向右滑动，当前页面随之平移并露出上一页内容，松手后返回上一页。

这种交互常见于 iOS 原生 App（如微信、Safari），如今也被广泛应用于 PWA 和移动 Web 应用中，以提升用户体验。

原生实现原理

通过监听触摸事件（touchstart、touchmove、touchend），动态修改页面容器的 transform: translateX() 值，并结合阈值判断是否触发返回操作。

关键点包括：

• 仅在页面左侧边缘（如 x < 50px）开始的触摸才激活 drag back
• 实时计算拖动距离并限制最大偏移（如不超过屏幕宽度的 60%）
• 松手时根据速度或位移决定是否返回

简易代码示例

<div id="drag-container">
  <!-- 页面内容 -->
</div>

<script>
const container = document.getElementById('drag-container');
let startX = 0, currentX = 0, isDragging = false;

container.addEventListener('touchstart', (e) => {
  const touch = e.touches[0];
  if (touch.clientX > 50) return; // 仅左侧触发
  startX = touch.clientX;
  isDragging = true;
});

container.addEventListener('touchmove', (e) => {
  if (!isDragging) return;
  const touch = e.touches[0];
  currentX = touch.clientX - startX;
  if (currentX > 0) {
    const maxX = window.innerWidth * 0.6;
    const translateX = Math.min(currentX, maxX);
    container.style.transform = `translateX(${translateX}px)`;
    container.style.transition = 'none';
    e.preventDefault(); // 阻止横向滚动
  }
});

container.addEventListener('touchend', () => {
  if (!isDragging) return;
  const threshold = window.innerWidth * 0.3;
  if (currentX > threshold) {
    // 触发返回逻辑（如 history.back()）
    container.style.transition = 'transform 0.3s ease-out';
    container.style.transform = `translateX(${window.innerWidth}px)`;
    setTimeout(() => history.back(), 300);
  } else {
    container.style.transition = 'transform 0.3s ease-out';
    container.style.transform = 'translateX(0)';
  }
  isDragging = false;
});
</script>