vue手指滑动插件vue-touch

1.安装依赖

npm install vue-touch@next --save

2.引入

//main.js

import  VueTouch from 'vue-touch'
Vue.use(VueTouch,{name:'v-touch'})
VueTouch.config.swipe = {
  threshold:50  //设置左右滑动的距离
}

3.使用

<template>
  <div class="hello">
    <v-touch v-on:swipeleft="swiperleft"  v-on:swiperight="swiperright" class="wrapper">
        <div>内容区</div>
    </v-touch>
  </div>
</template>
<script>

export default {
  methods:{
    swiperleft () {  //左划切换到goods页
      this.$router.push('');
    },
    swiperright () { //右滑切换到detail页
      this.$router.push('');
    }
  }

}
</script>

4.说明
说明中提及的动作都可监听：
Pan:触屏时的拖动行为
Pinch:手指放大缩小行为
Press:长按行为
Rotate:两手指旋转行为
Swipe:滑动行为
Tap:点击行为