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