鍍金池/ 問答/HTML5  HTML/ swiper插件安卓機(jī)卡頓怎么解決

swiper插件安卓機(jī)卡頓怎么解決

蘋果機(jī)使用swiper插件很流暢安卓機(jī)效果很卡頓怎么解決呢

回答
編輯回答
獨(dú)白

哇,還沒遇到過,檢測(cè)swiper版本,檢查瀏覽器,安卓版本低?
自己代碼的問題?
換個(gè)安卓機(jī)不就知道了,如果還是卡頓,難就是你代碼的問題嘍

2017年4月9日 01:04
編輯回答
命多硬

試試我這段代碼,

// 截流
function throttle (fn, delay = 100) {
  let wait = false

  return function () {
    if (!wait) {
      fn && fn.apply(this, arguments)
      wait = true

      setTimeout(() => {
        wait = false
      }, delay)
    }
  }
}

/**
 *
 * 滑動(dòng)
 * @param {HTMLElement} node
 * @param {Object} {
 *   delay = 0, // move截流時(shí)間
 *   start, // 滑動(dòng)開始
 *      參數(shù): pageX, pageY
 *   move, // 滑動(dòng)中,會(huì)不斷地觸發(fā),可以通過截流來限制觸發(fā)頻率
 *      參數(shù):
            time, // 總時(shí)間:ms
            disX, // 總路程:px
            disY,
            addX, // 路程增量:px
            addY,
            speedX: disX / time, // 平均速度:px/ms
            speedY: disY / time
 *   end, // 滑動(dòng)結(jié)束,參數(shù)同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, // 總時(shí)間: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)
}
2018年5月4日 19:15