vue vue-touch移动端手势-蒲公英云

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