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"

<article class="article fmt article-content" data-id="1190000019838103" data-license="" style="box-sizing: border-box; display: block; line-height: 1.75; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">

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

npm安装

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 () {
     console.log("左划")
    },
    swiperright: function () {
     console.log("右滑")
    }
  }

}

</article>

阅读 3.4k发布于 7月22日