方法一、v-touch 官网地址
包括单击、双击、长按、缩放等手势事件
安装
npm install vue-touch@next --save
引入
main.js中引入：
import VueTouch from ‘vue-touch‘
Vue.use(VueTouch, {name: ‘v-touch‘})
使用
html代码
<template>
<v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright" class="wrapper">
<div class="menu-container" ref="menuContainer">
<!-- 这个是内容 -->
</div>
</v-touch>
</template>
js代码
export default {
name: ‘Queue‘,
data () {
return {
}
},
methods: {
swiperleft: function () {
this.$router.push({‘path‘:‘/queuehistory‘});
},
swiperright: function () {
this.$router.push({‘path‘:‘/home‘});
}
}
}
方法二：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);
}
});