vue vue-touch移动端手势

最新推荐文章于 2025-04-08 15:33:22 发布

神奇大叔

最新推荐文章于 2025-04-08 15:33:22 发布

阅读量8.3k

点赞数 2

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43294560/article/details/107814708

版权

Vue 专栏收录该内容

42 篇文章

订阅专栏

本文介绍如何在Vue项目中使用Vue-Touch插件实现手势识别和触摸事件处理，包括安装、引入、使用方法及自定义手势配置。涵盖Pan平移、Pinch缩放、Press按压、Rotate旋转、Swipe滑动和Tap点击等事件类型的详细说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>