包括单击、双击、长按、缩放等手势事件
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‘}); } } }
包括单击、双击、长按、缩放等手势事件
npm install alloyfinger
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); } });
原文:https://www.cnblogs.com/woniu666/p/13424007.html