vue手势滚动_vue添加手势操作

在开发手机web页面时希望我的网页也可以像App一样可以左右滑动进行操作。如果你也和我的想法一样，你就可以复制我的代码了，一天的工作量又可以划水7小时。

方案一(不推荐了，有坑，表现为：如果页面有滚动条，并且添加了v-hammer:swipe.right，页面无法滚动)

安装包

npm install vue2-hammer

引用包

import { VueHammer } from 'vue2-hammer'

Vue.use(VueHammer)

使用

Tap me!

Swipe me!

Swipe me!

onSwipeLeft() {

//这里写上你想干的事情。。。

console.log("huahuahua!");

}

方案二

安装包

npm install --save hammerjs

引用包

import Hammer from "hammerjs";

使用

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!");

});

}

参考资料