The uniapp applet encapsulates the left sliding effect component

introduction

Mini program e-commerce project shopping carts often have a left-swipe to delete function. If you don’t want to use a plug-in, you need to write it yourself, so I personally wrote a left-swipe effect component.

Encapsulated components

//  SlideOperation/index.vue

<template>
	<view class="slide-wrapper" :style="{ transform: activeIndex === index ? 'translateX(' + itemTransLateX + 'rpx)' : 0 }">
		<view class="slide-content" @touchstart="touchStart($event, index)" @touchmove="touchMove($event, index)" @touchend="touchEnd($event, index)">
			<slot></slot>
		</view>
		<view class="operate-btn">
			<view v-if="isDelete" class="delete-btn" @click="delBtn">删除</view>
		</view>
	</view>
</template>

<script>
export default {
    
    
	props: {
    
    
		// 是否滑动
		isSlide: {
    
    
			type: Boolean,
			required: true
		},
		// 每个需要滑动区域的唯一值
		index: {
    
    
			type: Number,
			required: true
		},
		// 是否删除
		isDelete: {
    
    
			type: Boolean,
			required: true
		}
	},
	data() {
    
    
		return {
    
    
			// 当前滑动的区域
			activeIndex: 0,
			// 一开始水平方向的位置
			startX: 0,
			// 滑动的距离
			itemTransLateX: 0
		};
	},
	methods: {
    
    
		touchStart(e, index) {
    
    
			if (!this.isSlide) return;
			this.activeIndex = index;
			this.startX = e.changedTouches[0].clientX;
		},
		touchMove(e, index) {
    
    
			if (!this.isSlide) return;
			let moveX = e.changedTouches[0].clientX;
			this.itemTransLateX = moveX - this.startX >= 0 ? 0 : moveX - this.startX;
		},
		touchEnd(e, index) {
    
    
			if (!this.isSlide) return;
			let endX = e.changedTouches[0].clientX;
			if (endX === this.startX) {
    
    
				return (this.itemTransLateX = 0);
			}
			this.itemTransLateX = endX - this.startX;
			this.itemTransLateX = this.itemTransLateX <= -40 ? -100 : 0;
		},
		delBtn() {
    
    
			this.$emit('deleteProd', this.index);
		}
	},
	watch: {
    
    
		isSlide(newVal, oldVal) {
    
    
			if (!newVal) this.itemTransLateX = 0;
		}
	}
};
</script>

<style lang="scss" scoped>
.slide-wrapper {
    
    
	position: relative;
	display: flex;
	width: 100%;
	transition: all 0.4s;

	.slide-content {
    
    
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding-right: 10rpx;
	}

	.operate-btn {
    
    
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		height: 100%;
		transform: translateX(100%);

		.delete-btn {
    
    
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			height: 100%;
			color: $color-fff;
			font-size: 22rpx;
			background: #f52c2c;
			box-sizing: border-box;
		}
	}
}
</style>

Page usage

<template>
	// ....  
	<slide-operation :isSlide="true" :isDelete="true" :index="index" class="w100" @deleteProd="deleteProd">
		// 此处填写需要进行滑动的内容
	</slide-operation>
	// ..... 
	
// 只复制了具体组件的使用方法，该组件的外部是一个由 v-for 循环生成的标签，因此 index 的值需写成数据内部的唯一值，不可使用 v-for 的index值
</template>
<script>
import SlideOperation from '@/components/SlideOperation/index.vue';
export default {
    
    
	components: {
    
     SlideOperation }
};
</script>

Precautions

Since the default page of iOS mobile phones can slide down, if you add a component that uses the left sliding effect, you need to add catchtouchmove="return" to the area that can slide up and down to prevent the problem of the page sliding up and down when you slide left.

Regardless of whether it is the current page or not, as long as the following picture appears in the project, the animation effect will be delayed.

For example: if the sliding area is scroll-view, you need to add catchtouchmove="return" to this label. Similarly, if it is a view label, you need to add catchtouchmove="return" to the view controlled at the top.

This method is based on online information search and my encapsulation and transformation of the project itself. If there are any errors, you are welcome to point them out.