目录

• 1、安装
• 2、引入
• 3、使用
• (1)替换标签
• (2)定义手势
• (3)配置手势事件选项
• (4)阻止/触发手势
• (5)公共组件方法
• (6)自定义手势
• 4、事件类型
• Pan平移 
• Pinch缩放 
• Press按压 
• Rotate旋转 
• Swipe滑动 
• Tap点击 
• 代码示例

1、安装

cnpm install vue-touch@next --save

2、引入

在main.js中

import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})  v-touch可以是自定义名称

3、使用

Vue.use注册的name名称，默认该标签为div

• v-touch 

(1)替换标签

tag="要变成的标签名称,默认为div"

(2)定义手势

@事件类型='回调' 

(3)配置手势事件选项

:小写事件类型名称-options="{ direction: 'horizontal', threshold: 100 }

• threshold临界值
• directions方向: 'up', 'down', 'left', 'right', 'horizontal', 'vertical', 'all'
• 具体配置查看hammerjs

(4)阻止/触发手势

:enabled="true/false"   

允许/禁止所有的手势

:enabled="{ pinch: true, rotate: false }"  

允许和禁止指定手势

(5)公共组件方法

1、通过ref获取到该标签

2、在方法中

this.$refs.tapper.disable('tap')

公共方法

• disable('手势名称') 
• enable('手势名称') 
• toggle('手势名称') 
• disableAll() disable all Recognizers
• enableAll() enable all Recognizers
• isEnabled('手势名称') 

(6)自定义手势

在main.js中,在Vue.use之前使用

VueTouchVueTouch.registerCustomEvent('doubletap', {
  type: '手势名称',
  ...手势事件的配置选项,见(3)
  taps: 2  对应tap手势的触发点击次数配置
})
> ...</v-touch>

4、事件类型

Pan平移 

• pan
• panstart
• panmove
• panend
• pancancel
• panleft
• panright
• panup
• pandown

Pinch缩放 

• pinch
• pinchstart
• pinchmove
• pinchend
• pinchcancel
• pinchin
• pinchout 

Press按压 

• press
• pressup 

Rotate旋转 

• rotate
• rotatestart
• rotatemove
• rotateend
• rotatecancel

Swipe滑动 

• swipe
• swipeleft
• swiperight
• swipeup
• swipedown

Tap点击 

• tap

代码示例

<template>
   <div>
     category
     <!-- <div  :class='{swipe:move}'>
       <v-touch @swipeleft="swipeleft" style='width:200px;height:200px;backgroundColor:red;'>Swipe me!</v-touch>
       左滑
     </div> -->
      <div >
       <v-touch
        v-on:panstart="swipeleft"
        style='width:200px;height:200px;backgroundColor:red;'
        :pan-options="{ direction: 'horizontal', threshold: 100 }"
        v-bind:enabled="false"
        >Swipe me!</v-touch>
       左滑2
     </div>
     <Tabbar/>
   </div>
</template>

<script>
import Tabbar from '@/components/common/tabbar/tabbar.vue'
export default {
  name:'category',
  data(){
    return{
      move:false
    }
  },
  components:{
    Tabbar
  },
  methods:{
    swipeleft()
    {
      // setTimeout(()=>{
      //   this.$router.push('/shopcar')
      // },2000)
      
      this.move=true;
      console.log('左滑');
    }
  }
}
</script>

<style scoped>
.swipe{
  transform: translateX(-100%);
  transition: 2s;
}
</style>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。