vue vue-touch移动端手势详解

cnpm install vue-touch@next --save

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

:enabled="true/false"   

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

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

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

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