（转载）vue监听手指滑动vue-touch的使用


vue监听手指滑动vue-touch的使用


[

image

html5](https://segmentfault.com/t/html5)javascriptvue.jscss3

阅读约 2 分钟

源码（API）

https://github.com/vuejs/vue-touch/tree/next

API

Component Events

vue-touch supports all Hammer Events ot of the box, just bind a listener to the component with v-on and vue-touch will setup the Hammer Manager & Recognizer for you.

Recognizer Events Example
Pan pan, panstart, panmove, panend, pancancel,
panleft, panright, panup, pandown 		v-on:panstart="callback"
Pinch pinch, pinchstart, pinchmove,pinchend,
pinchcancel, pinchin, pinchout 		v-on:pinchout="callback"
Press press, pressup v-on:pressup="callback"
Rotate rotate, rotatestart, rotatemove,
rotateend, rotatecancel,		 v-on:rotateend="callback"
Swipe swipe, swipeleft, swiperight,
swipeup, swipedown 		v-on:swipeleft="callback"
Tap tap v-on:tap="callback"

由于需要监听手指的左右滑动事件，所以用到了v-touch这个插件。

npm安装

1
2
3
4
npm install vue-touch@next --save
//main.js中引入：
import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})

用法如下：

1
2
3
4
5
6
7
8
//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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export default {
  name: 'Queue',
  data () {
    return {

    }
  },
  methods: {
    swiperleft: function () {
     console.log("左划")
    },
    swiperright: function () {
     console.log("右滑")
    }
  }

}

阅读 3.4k发布于 7月22日