Uni-app listens for touch events, swipe events

ColorUI using document: blog.csdn.net/DevilAngeli…

The key point of the finger slide event is three events:

1, @touchstart: touchstart; 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: 'translateX('+moveX+'px)', 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">Peace elite</text>
			<text class="bg-gray radius padding-lr-sm text-green">Enter the</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">record</text>
			<text class="text-black">The peace report has been delivered</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">live</text>
			<text class="text-black">Wan Field old six, detail tutor</text>
		</view>
		<view class="padding-sm margin-top-sm flex align-center justify-between" style="background: #AAAAAA;">
			<text class="">More service</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>
Copy the code
data() {
	return {
		startData: {
			clientX: ' '.clientY: ' ',},moveX: 0.touch:}}, {},methods: {
	// Touch the event
	start(e){  //@touchstart touch starts
		this.transition = '.1s';
	    this.startData.clientX = e.changedTouches[0].clientX;   // The X coordinate when the finger is pressed
	    this.startData.clientY = e.changedTouches[0].clientY;   // The Y coordinate when the finger is pressed
	},
	end(e){  // @touchEnd ends the touch
		this.moveX = 0;  // The touch event ends and restores
		this.transition = '.5s';
		if(Math.abs(this.touch.clientX-this.startData.clientX) > 100) {  // At the end of the event, determine whether the sliding distance is sufficient to start the event
			console.log('Execute view jump event');
			// this.touch = {};
		} else {
			console.log('Not enough sliding distance, no jump')
			// this.touch = {};}},move(event) {  // @touchMove
		let touch = event.touches[0];  // During the slide, the coordinate information of the finger slide returns the Objcet object
		this.touch = touch;
		let data = touch.clientX - this.startData.clientX;
		if(touch.clientX < this.startData.clientX) {  // Move left
			if(data<-250) {
				data = -250; }}if(touch.clientX > this.startData.clientX) {  // Move to the right
			if(this.moveX == 0) {
				data = 0
			} else {
				if(data>50) {
					data = 50; }}}this.moveX = data; }},Copy the code
.showMore-box{
	position: relative;
	// transition: all .5s;
}
Copy the code

1. Before finger touch

2. Touch with your finger and swipe to the left

3. Release your finger and the page bounces back

Page using colorUI this CSS library to write, their OWN CSS style to write less, basically all with his class, some places are too lazy to adjust their own color, distance, size, directly use colorUI class, quite convenient.

Colorui Github github.com/weilanwl/Co…

First time write slide effect, write bad. Beginner, code quality worry, open to learning, accept criticism.