PHP前端开发

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

百变鹏仔 4周前 (11-20) #uniapp
文章标签 浅谈

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

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

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

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

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

<view :style="{	transform: 'translateX('+moveX+'px)', 	transition: transition}"><view><view><text>和平精英</text><text>进入</text></view><view><text></text><text>战绩</text><text>和平战报已送达</text></view><view><text></text><text>直播</text><text>万场老六,细节导师</text></view><view><text>更多服务</text><text></text></view></view><view><text></text><view>{{rightText}}</view></view></view>
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) &gt; 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(this.moveX == 0) {			data = 0		} else {			if(data&gt;50) {data = 50;			}		}	}	this.moveX = data;},}
.showMore-box{position: relative;// transition: all .5s;}

1、手指触摸前

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

3、松开手指,页面回弹

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

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

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

更多编程相关知识,请访问:编程入门!!