vue2.0移动端滑动事件vue-touch的实例代码

下面我将详细讲解vue2.0移动端滑动事件vue-touch的实例代码的完整攻略。

简介

Vue-Touch是一个基于HammerJS封装的适用于Vue2.x的触摸插件。它可以在Vue组件中使用v-touch指令，实现触屏事件的绑定和处理，包括Tap、Doubletap、Press、Swipe、Pinch、Rotate等常见的手势事件。

安装

在使用vue-touch之前，需要先安装vue-touch插件。

npm install vue-touch --save

然后在Vue项目中引入该插件。

import Vue from 'vue';
import VueTouch from 'vue-touch';

Vue.use(VueTouch, {name: 'v-touch'});

使用

使用vue-touch的最常见方式是将其绑定在DOM上，以触发相应的手势事件。

<template>
  <div v-touch:swipe="onSwipe">
    {{ message }}
  </div>
</template>

<script>
  export default {
    data () {
      return {
        message: 'Swipe me!'
      }
    },
    methods: {
      onSwipe (e) {
        console.log(e.direction); // swipe direction
      }
    }
  }
</script>

在这个例子中，我们用v-touch指令将swipe事件绑定到了一个div上，当该div被触摸后，会触发onSwipe方法，并将一个事件对象作为参数传递进去。

示例说明

下面给出两个示例，说明vue-touch如何实现Tap和Doubletap手势事件的绑定和处理。

示例1：Tap手势

当用户在元素上单击或轻敲时触发Tap手势，可以用以下方式绑定：

<template>
  <div v-touch:tap="onTap">
    {{ message }}
  </div>
</template>

<script>
  export default {
    data () {
      return {
        message: 'Tap me!'
      }
    },
    methods: {
      onTap (e) {
        console.log('tap');
      }
    }
  }
</script>

示例2：Doubletap手势

当用户在元素上双击或双指敲击时触发Doubletap手势，可以用以下方式绑定：

<template>
  <div v-touch:doubletap="onDoubleTap">
    {{ message }}
  </div>
</template>

<script>
  export default {
    data () {
      return {
        message: 'Double tap me!'
      }
    },
    methods: {
      onDoubleTap (e) {
        console.log('double tap');
      }
    }
  }
</script>

总结

vue-touch提供了丰富的手势事件，可以很方便地实现移动端的交互效果。上述示例只是其中的两个，更多事件详请参考官方文档：https://github.com/vuejs/vue-touch 在使用过程中，请注意引入vue-touch插件，并按照规范绑定相应的手势事件。