使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)

下面是使用原生JS封装Web App滑动效果(惯性滑动、滑动回弹)的攻略：

1. 问题背景

在开发Web APP时，我们会涉及到页面的滑动效果，例如图片浏览、列表滑动等。虽然很多UI框架（如iView、Element UI等）都提供了比较方便的组件，但是自己手写滑动效果，既能提升自己的技能水平，又能优化页面性能。

2. 实现思路

实现惯性滑动，需要监听touchstart、touchmove、touchend事件，通过计算手指在滑动过程中的速度以及加速度，来模拟惯性效果。实现滑动回弹，需要合理运用CSS3属性和贝塞尔曲线。

3. 实现步骤

3.1 监听touch事件

//代码示例1：监听touch事件
let startX, startY, endX, endY = 0;
let touchArea = document.getElementById('touchArea');
// touchstart事件
touchArea.addEventListener('touchstart', function (e) {
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
}, false);
// touchmove事件
touchArea.addEventListener('touchmove', function (e) {
  endX = e.touches[0].clientX;
  endY = e.touches[0].clientY;
  // 阻止页面的滑动默认事件
  e.preventDefault();
}, false);
// touchend事件
touchArea.addEventListener('touchend', function (e) {
  let diffX = endX - startX;
  let diffY = endY - startY;
  // 自己的业务逻辑
}, false);

3.2 计算滑动距离和时间

//代码示例2：计算滑动距离和时间
let startTime, endTime = 0;
// touchstart事件
touchArea.addEventListener('touchstart', function (e) {
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
  startTime = new Date().getTime();
}, false);
// touchend事件
touchArea.addEventListener('touchend', function (e) {
  endX = e.changedTouches[0].clientX;
  endY = e.changedTouches[0].clientY;
  endTime = new Date().getTime();
  let diffX = endX - startX;
  let diffY = endY - startY;
  let diffTime = endTime - startTime;
  // 计算速度和加速度
  let speedX = diffX / diffTime;
  // 自己的业务逻辑
}, false);

3.3 实现惯性滑动

//代码示例3：实现惯性滑动
// touchend事件
touchArea.addEventListener('touchend', function (e) {
  endX = e.changedTouches[0].clientX;
  endY = e.changedTouches[0].clientY;
  endTime = new Date().getTime();
  let diffX = endX - startX;
  let diffY = endY - startY;
  let diffTime = endTime - startTime;
  // 计算速度和加速度
  let speedX = diffX / diffTime;
  // 模拟惯性滑动
  let distance = 0;
  let currentX = touchArea.offsetLeft;
  let timer = setInterval(function () {
    distance = speedX * 20;
    currentX += distance;
    if (Math.abs(currentX) > Math.abs(diffX)) {
      currentX = diffX;
      clearInterval(timer);
    }
    touchArea.style.left = currentX + 'px';
    speedX = speedX * 0.95;
  }, 20);
}, false);

3.4 实现滑动回弹

//代码示例4：实现滑动回弹
// touchend事件
touchArea.addEventListener('touchend', function (e) {
  endX = e.changedTouches[0].clientX;
  endY = e.changedTouches[0].clientY;
  endTime = new Date().getTime();
  let diffX = endX - startX;
  let diffY = endY - startY;
  let diffTime = endTime - startTime;
  // 计算速度和加速度
  let speedX = diffX / diffTime;
  // 模拟惯性滑动
  let distance = 0;
  let currentX = touchArea.offsetLeft;
  let timer = setInterval(function () {
    distance = speedX * 20;
    currentX += distance;
    if (Math.abs(currentX) > Math.abs(diffX)) {
      currentX = diffX;
      clearInterval(timer);
      // 滑动回弹
      touchArea.style.transition = 'All ease-in-out 0.2s';
      touchArea.style.webkitTransition = 'All ease-in-out 0.2s';
      touchArea.style.animation = 'bounce 0.2s';
      touchArea.style.webkitAnimation = 'bounce 0.2s';
    }
    touchArea.style.left = currentX + 'px';
    speedX = speedX * 0.95;
  }, 20);
}, false);

4. 示例说明

示例1：使用原生JS实现惯性滑动和滑动回弹效果：代码地址

示例2：基于示例1的改进版本，结合H5C3的transition和animation实现更加细腻的滑动效果：代码地址