uni-app 프로젝트가 터치 및 슬라이딩 이벤트를 모니터링하는 방법에 대한 간략한 설명

uni-app 프로젝트의 이벤트를 모니터링하는 방법은 무엇인가요? 다음 uniapp 튜토리얼 칼럼에서는 uni-app에서 터치 이벤트와 슬라이딩 이벤트를 모니터링하는 방법을 소개하겠습니다.

터치 이벤트 및 슬라이딩 이벤트를 모니터링하는 uni-app

ColorUI 사용 설명서: https://blog.csdn.net/DevilAngelia/article/details/119447883

손가락 슬라이딩 이벤트의 핵심 포인트는 세 가지입니다. 이벤트 :

1. @touchstart: 터치 시작; 2. @touchmove: 손가락으로 미끄러지는 과정; 3. @touchend: 터치가 종료되고 손가락이 화면에서 벗어납니다.

<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. 손가락을 터치하기 전

2. 손가락을 터치한 후 왼쪽으로 밀어주세요

3. 페이지가 리바운드됩니다

colorUI CSS 라이브러리 나는 내 CSS 스타일에 대해 거의 작성하지 않고 기본적으로 그의 클래스를 사용합니다. 어떤 곳에서는 색상, 거리, 크기를 직접 조정하기에는 너무 게을러서 그냥 colorUI 클래스를 사용하는데 매우 편리합니다. .

colorui github 다운로드 주소 : https://github.com/weilanwl/ColorUI/

슬라이딩 효과를 처음 써보는데 잘 못썼네요. 초보자분들은 코드 품질이 걱정되시겠지만, 열린 마음으로 배우고 비판과 수정을 받아들이세요.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 uni-app 프로젝트가 터치 및 슬라이딩 이벤트를 모니터링하는 방법에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!