vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue-touch移动端手势

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

(1)替换标签

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

(2)定义手势

@事件类型='回调' 

(3)配置手势事件选项

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

(4)阻止/触发手势

:enabled="true/false"   

允许/禁止所有的手势

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

允许和禁止指定手势

(5)公共组件方法

1、通过ref获取到该标签

2、在方法中

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

公共方法

(6)自定义手势

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

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

4、事件类型

Pan平移 

Pinch缩放 

Press按压 

Rotate旋转 

Swipe滑动 

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>

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

您可能感兴趣的文章:
阅读全文