vue的tap插件_vue移动端touch插件

方法一、v-touch 官网地址

包括单击、双击、长按、缩放等手势事件

安装

npm install vue-touch@next --save

引入

main.js中引入：

import VueTouch from 'vue-touch'

Vue.use(VueTouch, {name: 'v-touch'})

使用

html代码

js代码

export default {

name: 'Queue',

data () {

return {

}

},

methods: {

swiperleft: function () {

this.$router.push({'path':'/queuehistory'});

},

swiperright: function () {

this.$router.push({'path':'/home'});

}

}

}

发现BUG：vue-touch不能上下滑动的问题

在v-touch标签里添加class

.v-touch{touch-action:pan-y !important;

}

参考：https://www.cnblogs.com/ichenchao/p/11697856.html

方法二：AlloyFinger (腾讯的) 官网地址

包括单击、双击、长按、缩放等手势事件

安装

npm install alloyfinger

在使用vue页面中引入

import AlloyFinger from 'alloyfinger'

方法调用

var af = new AlloyFinger(element, {

touchStart: function () { },

touchMove: function () { },

touchEnd: function () { },

touchCancel: function () { },

multipointStart: function () { },

multipointEnd: function () { },

tap: function () { },

doubleTap: function () { },

longTap: function () { },

singleTap: function () { },

rotate: function (evt) {

console.log(evt.angle);

},

pinch: function (evt) {

console.log(evt.zoom);

},

pressMove: function (evt) {

console.log(evt.deltaX);

console.log(evt.deltaY);

},

swipe: function (evt) {

console.log("swipe" + evt.direction);

}

});