vue vue-touch移动端手势

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
	
	 ...
	
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>