uniapp左滑删除

<!-- 向左滑动 右边出现操作按钮 -->
<template>
	<view class="wrapper" :style="{marginTop: itemTop + 'rpx',height: parentHeight + 'rpx'}">
		<view :style="[tactive ? leftStyle : '']" class="item-view" @touchstart="touchStart($event)" @touchmove="touchMove($event)"
		 @touchend="touchEnd($event)" @click="itemClick(itemData)">
			<slot name='list'></slot>
		</view>

		<view class="delete" @click.stop="operation(itemData)">
			<!-- <image :style="btnStyle" :src="operationImageSrc" mode=""></image> -->
			删除
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			itemTop: {
				type: Number,
				default: 30
			},
			parentHeight: {
				type: Number,
				default: 200
			},
			deleteBtn: {
				type: Number,
				default: 160
			},
			// 操作按钮路劲
			operationImageSrc: {
				type: String,
				default: ''
			},

			// 操作按钮样式
			btnStyle: {
				type: String,
				default: 'width: 50rpx; height: 50rpx;'
			},
			// 是否允许滑动
			isSlide: {
				type: Boolean,
				default: true
			},
			delBtnWidth: {
				type: Number,
				default: 160
			}
		},
		data() {
			return {
				startX: null, //起始位置
				startM: null, //结束位置
				left: null,
				leftStyle: {},
				tactive: false,
				leftValue: 0
			};
		},
		methods: {
			operation(item) {
				// this.init()
				this.$emit('operationCallBack')
			},

			itemClick(item) {
				this.leftStyle = {}
				this.$emit('itemClickCallBack')
			},

			init() {
				this.leftStyle = {}
			},

			// touchStart(e) {
			// 	if (!this.isSlide) {
			// 		//不允许滑动
			// 		return
			// 	}
			// 	this.tactive = true
			// 	this.startX = e.touches[0].clientX
			// 	this.$emit('itemTouchStart')
			// },
			// touchMove(e) {
			// 	if (!this.isSlide) {
			// 		//不允许滑动
			// 		return
			// 	}
			// 	this.startM = e.touches[0].clientX
			// 	this.left = this.startM - this.startX
			// 	if (this.left > this.deleteBtn) {
			// 		//右滑 
			// 		this.leftStyle = { left: 0 + 'px' }
			// 	}
			// 	//左滑
			// 	if (this.left < -this.deleteBtn) {
			// 		this.left = -this.deleteBtn //转成正数
			// 		var temp = this.deleteBtn + this.left
			// 		this.leftStyle = { left: temp + 'rpx' }
			// 	}
			// },
			// touchEnd(e) {
			// 	if (!this.isSlide) {
			// 		//不允许滑动
			// 		return
			// 	}
			// 	if (this.left < this.deleteBtn) {
			// 		//鼠标松开时, 如果长度小于.delete的width
			// 		this.left = -this.deleteBtn
			// 		this.leftStyle = { left: this.left + 'rpx' }
			// 		var temp = 0
			// 		this.$emit('itemTouchEnd')
			// 	}
			// }
			//开始触摸滑动
			touchStart(e) {
				if (!this.isSlide) {
					//不允许滑动
					return
				}
				this.tactive = true
				this.startX = e.touches[0].clientX
				this.$emit('itemTouchStart')
			},
			//触摸滑动
			touchMove(e) {
				let moveX = e.touches[0].clientX
				this.leftValue = this.moveFunc(moveX)
				console.log(this.leftValue)
				this.leftStyle = {
					left: this.leftValue + 'rpx'
				}
			},
			//触摸滑动结束
			touchEnd(e, item) {
				if (-this.leftValue > this.delBtnWidth / 2) {
					this.leftValue = -this.delBtnWidth
				} else {
					this.leftValue = 0
				}

				this.leftStyle = {
					left: this.leftValue + 'rpx'
				}
			},
			moveFunc(moveX, item) {
				// 原始位置向左，leftStyle为小于0；原始位置向右，leftStyle为大于0
				// disX为相对最初位置的左右距离
				// 大于0为向右，小于0为向左
				let disX = moveX - this.startX;
				let delBtnWidth = this.delBtnWidth;
				let offsetNum = 0;
				if (-disX >= delBtnWidth && this.leftValue === -delBtnWidth) {
					return;
				}
				if (disX == 0 || disX > 0) {
					offsetNum = 0;
				} else {
					offsetNum = disX;
					if (disX <= -delBtnWidth) {
						offsetNum = -delBtnWidth;
					}
				}

				return offsetNum;
			}
		}
	};
</script>

<style scoped lang="scss">
	.wrapper {
		width: 100%;
		overflow: hidden;
		display: flex;
		position: relative;

		.item-view {
			width: 100%;
			background: #fff;
			position: absolute;
			left: 0;
			z-index: 3;
			transition: all 0.5s;
		}

		.delete {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			position: absolute;
			right: 0px;
			width: 160rpx;
			height: 100%;
			background: red;
			color: #fff;
			text-align: end;
			transition: all 0.5s;
		}
	}
</style>

使用：

...
		<SlideLeft 
			@operationCallBack="deleteData(item)"
			v-for='(item,index) in healthDatas' :key='index' 
			:itemTop="30">
				<view class="health-box" slot="list">
					<view class="color_line" :class="{ color_line_organ: item.type == 0,color_line_blue: item.type == 1}"></view>
					<view class="health-head">
						<view class="health-head-left flex">
							<view class="font16 health-title">{{item.healthItemName ? item.healthItemName : '[导入数据]'}}</view>
						</view>
						<view class="health-head-right">
							<view class="health-title-absent" v-if="item.type == 0 && item.absentCount !== 0">{{item.absentCount}}人未录入</view>
							{{item.examTime.slice(5,11)}} {{item.teacherName? item.teacherName: ''}}
						</view>
						<!-- <view class="delete font14 flex" @click.stop="deleteData(item)">删除</view> -->
					</view>
					<view class="health-epx font14" @click.stop="clickRecordItem(item)">
						{{item.orgInfos[0].grade}} {{item.orgInfos[0].orgName}}
					</view>
				</view>
			</SlideLeft>
			...
import SlideLeft from './components/slide.vue'
...
		components: {
			requestBlank,
			blank,
			tabBar,
			SlideLeft
		},

注释的也可以使用，两种判断