Question

帮助请帮助，我不明白原因。引发错误ReferenceError：未定义Velocity。如果我使用$（function（）{};那么错误就会消失，但之后根本就不起作用。使用锤子2.0.4和速度1.2.3

＆＃13;

// Constants
const THRESH = 0.75;
const TIMING = 250;

// When the dom is loaded, set up hammer events.
document.addEventListener('DOMContentLoaded', f => {
  var lis = document.querySelectorAll('.swipe');
  for (let i = 0; i < lis.length; i++) {
    let hammertime = new Hammer(lis[i]);
    hammertime.on('panright', e => handlePan(e));
    hammertime.on('panend', e => reset(e));
  }
});

// pane{right} handler
function handlePan(e, model) {
  var {target: el, deltaX: dx} = e;
  if (doAction(dx, el)) {
    el.classList.add('action');
  } else {
    el.classList.remove('action');
  }
  Velocity(el, {
    translateX: dx
  }, 0);
}

// panend handler
function reset(e) {
  var {target: el, deltaX: dx} = e;
  // Should we remove the element?
  if (doAction(dx, el)) {
    Velocity(el, {
      translateX: dx * 2
    }, TIMING).then(() => {
      return Velocity(el, {
        height: 0
      }, TIMING);
    }).then(() => {
      el.parentNode.removeChild(el);
    });
  } else {
    Velocity(el, {
      translateX: 0
    }, TIMING);
  }
}

// Determines if an element will be dismissed
function doAction(dx, el) {
  return Math.abs(dx) >= THRESH * el.clientWidth;
}

＆＃13;

.swipe {
  position: relative;
  list-style: none;
  text-align: center;
  background: #9e9e9e;
  height: 150px;
  line-height: 150px;
  width: 40vw;
}

＆＃13;

<div class="swipe">Swipe me!</div>


<!--Scripts-->
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

＆＃13;

Answer 1

velocity库引用应该是之前 jQuery参考。您知道这一点的方式是，当您运行代码时，打开开发人员工具（F12）并且您收到错误，错误来自jQuery代码 - - 这意味着jQuery无法找到速度。然后查看脚本引用，您可以看到为什么...在加载速度库之前jQuery库正在运行。

这有效：

＆＃13;

// Constants
const THRESH = 0.75;
const TIMING = 250;

// When the dom is loaded, set up hammer events.
document.addEventListener('DOMContentLoaded', f => {
  var lis = document.querySelectorAll('.swipe');
  for (let i = 0; i < lis.length; i++) {
    let hammertime = new Hammer(lis[i]);
    hammertime.on('panright', e => handlePan(e));
    hammertime.on('panend', e => reset(e));
  }
});

// pane{right} handler
function handlePan(e, model) {
  var {target: el, deltaX: dx} = e;
  if (doAction(dx, el)) {
    el.classList.add('action');
  } else {
    el.classList.remove('action');
  }
  Velocity(el, {
    translateX: dx
  }, 0);
}

// panend handler
function reset(e) {
  var {target: el, deltaX: dx} = e;
  // Should we remove the element?
  if (doAction(dx, el)) {
    Velocity(el, {
      translateX: dx * 2
    }, TIMING).then(() => {
      return Velocity(el, {
        height: 0
      }, TIMING);
    }).then(() => {
      el.parentNode.removeChild(el);
    });
  } else {
    Velocity(el, {
      translateX: 0
    }, TIMING);
  }
}

// Determines if an element will be dismissed
function doAction(dx, el) {
  return Math.abs(dx) >= THRESH * el.clientWidth;
}

＆＃13;

.swipe {
  position: relative;
  list-style: none;
  text-align: center;
  background: #9e9e9e;
  height: 150px;
  line-height: 150px;
  width: 40vw;
}

＆＃13;

<!--Scripts-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min.js"></script>

<div class="swipe">Swipe me!</div>

＆＃13;

可能是错误的原因＆＃34; ReferenceError：Velocity未定义＆＃34;？

1 个答案: