浅谈uni-app项目怎么监听触摸和滑动事件

uni-app项目中怎么监听事件？下面uniapp教程栏目给大家介绍一下uni-app中监听触摸事件和滑动事件的方法，希望对大家有所帮助！

uni-app 中监听触摸事件，滑动事件

ColorUI使用文档： https://blog.csdn.net/DevilAngelia/article/details/119447883

手指滑动事件关键点在于三个事件：

1、@touchstart ：触摸开始； 2、@touchmove：手指滑动的过程； 3、@touchend：触摸结束，手指离开屏幕。

	
		
			和平精英
			进入
		
		
			
			战绩
			和平战报已送达
		
		
			
			直播
			万场老六，细节导师
		
		
			更多服务
			
		
	
	
		
		{{rightText}}
	

data() {
	return {
		startData: {
			clientX: '',
			clientY: '',
		},
		moveX: 0,
		touch: {},
	}
},
methods: {
	// 触摸touch事件
	start(e){  //@touchstart 触摸开始
		this.transition = '.1s';
	    this.startData.clientX = e.changedTouches[0].clientX;   //手指按下时的X坐标         
	    this.startData.clientY = e.changedTouches[0].clientY;   //手指按下时的Y坐标
	},
	end(e){  //@touchend触摸结束
		this.moveX = 0;  //触摸事件结束恢复原状
		this.transition = '.5s';
		if(Math.abs(this.touch.clientX-this.startData.clientX) > 100) {  //在事件结束时，判断滑动的距离是否达到出发需要执行事件的要求
			console.log('执行查看跳转事件');
			// this.touch = {};
		} else {
			console.log('滑动距离不够，不执行跳转')
			// this.touch = {};
		}
	},
	move(event) {  //@touchmove触摸移动
		let touch = event.touches[0];  //滑动过程中，手指滑动的坐标信息 返回的是Objcet对象
		this.touch = touch;
		let data = touch.clientX - this.startData.clientX;
		if(touch.clientX < this.startData.clientX) {  //向左移动
			if(data<-250) {
				data = -250;
			}
		}
		if(touch.clientX > this.startData.clientX) {  //向右移动
			if(this.moveX == 0) {
				data = 0
			} else {
				if(data>50) {
					data = 50;
				}
			}
		}
		this.moveX = data;
	},
}

.showMore-box{
	position: relative;
	// transition: all .5s;
}

1、手指触摸前

2、手指触摸，并向左滑动

Mulan AI

画布式AI视频创作平台，轻松制作爆款视频

下载

3、松开手指，页面回弹

页面采用的colorUI这个css库来写的，自己的css样式写的少，基本全是用他的类，有些地方也懒得去自己调颜色、距离、大小，就直接用colorUI的类，挺方便的。

colorui github下载地址： https://github.com/weilanwl/ColorUI/

第一次写滑动效果，写的不好。 初学者，代码质量堪忧，虚心学习，接受批评指正。

更多编程相关知识，请访问：编程入门！！