swiper插件安卓机卡顿怎么解决

Question

苹果机使用swiper插件很流畅安卓机效果很卡顿怎么解决呢

Answer 1

哇，还没遇到过，检测swiper版本，检查浏览器，安卓版本低？
自己代码的问题？
换个安卓机不就知道了，如果还是卡顿，难就是你代码的问题喽

Answer 2

试试我这段代码，

// 截流

function throttle (fn, delay = 100) {

  let wait = false

  return function () {

    if (!wait) {

      fn && fn.apply(this, arguments)

      wait = true

      setTimeout(() => {

        wait = false

      }, delay)

    }

  }

}

/**

 *

 * 滑动

 * @param {HTMLElement} node

 * @param {Object} {

 *   delay = 0, // move截流时间

 *   start, // 滑动开始

 *      参数: pageX, pageY

 *   move, // 滑动中，会不断地触发，可以通过截流来限制触发频率

 *      参数:

            time, // 总时间:ms

            disX, // 总路程:px

            disY,

            addX, // 路程增量:px

            addY,

            speedX: disX / time, // 平均速度:px/ms

            speedY: disY / time

 *   end, // 滑动结束，参数同move

 * }

 */

export default function (node, {

  delay = 0,

  start,

  move,

  end

}) {

  if (!node) return

  let sTouch, eTouch, sTime

  let touch, time, disX, disY, addX, addY

  node.addEventListener('touchstart', e => {

    e.preventDefault()

    sTime = e.timeStamp

    sTouch = eTouch = e.targetTouches[0]

    start && start({

      pageX: sTouch.pageX,

      pageY: sTouch.pageY

    })

  }, false)

  node.addEventListener('touchmove', throttle(e => {

    touch = e.targetTouches[0]

    time = e.timeStamp - sTime

    disX = touch.pageX - sTouch.pageX

    disY = touch.pageY - sTouch.pageY

    addX = touch.pageX - eTouch.pageX

    addY = touch.pageY - eTouch.pageY

    move && move({

      time, // 总时间:ms

      disX, // 总路程:px

      disY,

      addX, // 路程增量:px

      addY,

      speedX: disX / time, // 平均速度:px/ms

      speedY: disY / time

    })

    // 记录上一次touch

    eTouch = touch

  }, delay), false)

  node.addEventListener('touchend', e => {

    touch = e.changedTouches[0]

    time = e.timeStamp - sTime

    disX = touch.pageX - sTouch.pageX

    disY = touch.pageY - sTouch.pageY

    addX = touch.pageX - eTouch.pageX

    addY = touch.pageY - eTouch.pageY

    end && end({

      time,

      disX,

      disY,

      addX,

      addY,

      speedX: disX / time,

      speedY: disY / time

    })

  }, false)

}