A brief discussion on how the uni-app project monitors touch and sliding events

How to monitor events in the uni-app project? The following uniapp tutorial column will introduce to you the method of monitoring touch events and sliding events in uni-app. I hope it will be helpful to everyone!

Listening to touch events and sliding events in uni-app

ColorUI usage documentation: https://blog.csdn.net/DevilAngelia/article/details /119447883

The key points of the finger sliding event are three events:

1, @touchstart: touch start; 2. @touchmove: the process of finger sliding; 3. @touchend: The touch ends and the finger leaves the screen.

<view class="margin-top-sm showMore-box" 
	:style="{
		transform: &#39;translateX(&#39;+moveX+&#39;px)&#39;, 
		transition: transition
	}" 
	@touchstart="start" 
	@touchend="end" 
	@touchmove="move">
	<view class="radius bg-gray padding-top-sm margin-right-xl" style="flex: 1; overflow: hidden;">
		<view class="flex align-center justify-between padding-lr-sm">
			<text class="text-bold text-black">和平精英</text>
			<text class="bg-gray radius padding-lr-sm text-green">进入</text>
		</view>
		<view class="margin-top-sm padding-lr-sm">
			<text class="cuIcon-paintfill text-yellow"></text>
			<text class="text-black text-bold padding-lr-sm">战绩</text>
			<text class="text-black">和平战报已送达</text>
		</view>
		<view class="margin-top-sm padding-lr-sm">
			<text class="cuIcon-paintfill text-yellow"></text>
			<text class="text-black text-bold padding-lr-sm">直播</text>
			<text class="text-black">万场老六，细节导师</text>
		</view>
		<view class="padding-sm margin-top-sm flex align-center justify-between" style="background: #AAAAAA;">
			<text class="">更多服务</text>
			<text class="cuIcon-right"></text>
		</view>
	</view>
	<view class="radius bg-gray padding-sm flex align-center" style="width: 100vw; height: 100%; position: absolute; z-index: 1; right: calc(-100vw + 15px); top: 0;">
		<text class="cuIcon-pullleft text-gray"></text>
		<view class="text-gray padding-left-sm" style="width: 16px;">{{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) > 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. Touch your finger before

2. Touch your finger and slide to the left

3. Release your finger and the page will rebound.

The page is written using the colorUI css library. I write less of my own css styles, basically all of them. Using his class, in some places I am too lazy to adjust the color, distance, and size myself, so I just use the colorUI class, which is very convenient.

colorui github download address: https://github.com/weilanwl/ColorUI/

The first time I wrote a sliding effect, I didn’t write it well. Beginners, the quality of the code is worrying, learn with an open mind and accept criticism and corrections.

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of A brief discussion on how the uni-app project monitors touch and sliding events. For more information, please follow other related articles on the PHP Chinese website!