Perbincangan ringkas tentang cara projek uni-app memantau peristiwa sentuhan dan gelongsor

Bagaimana untuk memantau acara dalam projek uni-app? Lajur uniapp tutorial berikut akan memperkenalkan kepada anda kaedah memantau acara sentuh dan acara gelongsor dalam apl uni saya harap ia akan membantu anda!

Dengar acara sentuh dan acara gelongsor dalam apl uni

Dokumentasi penggunaan ColorUI: https://blog.csdn.net/DevilAngelia/article/ butiran /119447883

Inti utama acara gelongsor jari ialah tiga acara:

1 @touchstart: touch start; 2. @touchmove: proses gelongsor jari; 3. @touchend: Sentuhan tamat dan jari meninggalkan skrin.

<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 Sebelum menyentuh dengan jari

2

3 Lepaskan jari anda dan halaman akan melantun semula

Halaman ditulis menggunakan pustaka css colorUI, dengan anda sendiri css Terdapat sangat sedikit gaya yang ditulis, dan saya pada dasarnya menggunakan kelasnya Di sesetengah tempat, saya terlalu malas untuk menyesuaikan warna, jarak dan saiz sendiri, jadi saya hanya menggunakan kelas colorUI, yang sangat mudah.

alamat muat turun github colorui: https://github.com/weilanwl/ColorUI/

Kali pertama saya menulis kesan gelongsor, saya tidak menulisnya dengan baik. Pemula, kualiti kod membimbangkan, belajar dengan fikiran terbuka dan menerima kritikan dan pembetulan.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Perbincangan ringkas tentang cara projek uni-app memantau peristiwa sentuhan dan gelongsor. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!