在开发手机web页面时希望我的网页也可以像App一样可以左右滑动进行操作。如果你也和我的想法一样,你就可以复制我的代码了,一天的工作量又可以划水7小时。
使用基于vue封装的 vue2-hammer
npm install vue2-hammer
import { VueHammer } from 'vue2-hammer'
Vue.use(VueHammer)
<a v-hammer:tap="onTap">Tap me!</a>
<div v-hammer:swipe.left="onSwipeLeft">Swipe me!</div>
<div v-hammer:swipe.left="(event)=> onSwipeLeft(event, item, i)">Swipe me!</div>
<script>
onSwipeLeft() {
//这里写上你想干的事情。。。
console.log("huahuahua!");
}
</script>
使用原生的 hammer
npm install --save hammerjs
import Hammer from "hammerjs";
<div class="square"></div>
<script>
hammer = null;
//vue的updated钩子函数
updated() {
/*要把document.querySelector放到updated中,否则可能dom还没渲染,就获取不到,你也可放在monted中使用定时器循环获取*/
let square = document.querySelector(".square");
if (!square || !!this.hammer) {
return;
}
// Create an instance of Hammer with the reference.
this.hammer = new Hammer(square);
this.hammer.on("swiperight", function(e) {
//这里写上你想干的事情。。。
console.log("huahuahua!");
});
}
</script>
参考资料