vue移动端touch插件

方法一、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'});
    }
  }

}

 

 

发现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);
    }
});