2016-03-15 115 views
1

請幫忙,我不明白原因。拋出一個錯誤ReferenceError:沒有定義Velocity。如果我使用$(函數(){};然後錯誤消失,但後來乾脆不工作時使用鐵錘2.0.4和1.2.3的速度什麼可能是錯誤的原因「ReferenceError:Velocity is not defined」?

// 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; 
 
}
.swipe { 
 
    position: relative; 
 
    list-style: none; 
 
    text-align: center; 
 
    background: #9e9e9e; 
 
    height: 150px; 
 
    line-height: 150px; 
 
    width: 40vw; 
 
}
<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>

+3

我沒有看到ÿ您可以在任何地方定義「速度」,或者構建它。 –

+0

請向我們展示HTML,您可能只是按錯誤的順序包含JS文件,但我們需要確認您的HTML。 –

+0

赦免,我加入了這個問題。 – SterKun

回答

1

The velocity library reference should have been BEFORE the jQuery reference. The way you know this is that when you run the code, with the developers tools open (F12) and you get the error, the error comes up from within the jQuery code - - so that means that jQuery can't find velocity. Then looking at the script references, you can see why...the jQuery library is running before the velocity library has been loaded.

此。工作原理:

// 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; 
 
}
.swipe { 
 
    position: relative; 
 
    list-style: none; 
 
    text-align: center; 
 
    background: #9e9e9e; 
 
    height: 150px; 
 
    line-height: 150px; 
 
    width: 40vw; 
 
}
<!--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>

+0

非常感謝大家。 – SterKun

相關問題