ユニアプリ プロジェクトがタッチ イベントとスライド イベントを監視する方法についての簡単な説明

uni-app プロジェクトでイベントを監視するにはどうすればよいですか?次の uniapp チュートリアル コラムでは、uni-app でタッチイベントやスライドイベントを監視する方法を紹介しますので、皆様のお役に立てれば幸いです。

uni-app でのタッチ イベントとスライド イベントのリスニング

ColorUI の使用ドキュメント: https://blog.csdn.net/DevilAngelia/article/詳細 /119447883

指スライド イベントのキー ポイントは、次の 3 つのイベントです。

1、@touchstart: touch start; 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/

初めてスライド エフェクトを書いたとき、うまく書けませんでした。 初心者にとっては、コードの品質が心配です。広い心で学び、批判や修正を受け入れてください。

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上がユニアプリ プロジェクトがタッチ イベントとスライド イベントを監視する方法についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。