Eine kurze Diskussion darüber, wie das Uni-App-Projekt Berührungs- und Gleitereignisse überwacht

Wie überwache ich Ereignisse im Uni-App-Projekt? Die folgende Kolumne „Uniapp-Tutorial“ stellt Ihnen die Methode zur Überwachung von Berührungsereignissen und Schiebeereignissen in der Uni-App vor. Ich hoffe, sie wird Ihnen hilfreich sein!

Uni-App zur Überwachung von Berührungsereignissen und Gleitereignissen

Dokumentation zur Verwendung von ColorUI: https://blog.csdn.net/DevilAngelia/article/details/119447883

Die wichtigsten Punkte von Fingergleitereignissen sind drei Ereignisse:

1. @touchstart: Touch Start; 2. @touchmove: der Prozess des Fingergleitens; 3. @touchend: Die Berührung endet und der Finger verlässt den Bildschirm.

<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;
	},
}

1. Berühren Sie Ihren Finger und schieben Sie ihn nach links

3. Lassen Sie Ihren Finger los und die Seite springt zurück colorUI-CSS-Bibliothek Ich schreibe sehr wenig über meine eigenen CSS-Stile und verwende im Grunde seine Klassen. An manchen Stellen bin ich zu faul, die Farbe, den Abstand und die Größe selbst anzupassen, also verwende ich einfach die colorUI-Klassen, was sehr praktisch ist .

colorui Github-Download-Adresse: https://github.com/weilanwl/ColorUI/

Dies ist das erste Mal, dass ich einen Gleiteffekt schreibe, aber ich habe ihn nicht gut geschrieben. Für Anfänger ist die Qualität des Codes besorgniserregend. Lernen Sie aufgeschlossen und akzeptieren Sie Kritik und Korrekturen.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Einführung in die Programmierung

! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion darüber, wie das Uni-App-Projekt Berührungs- und Gleitereignisse überwacht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!