uniapp左滑删除

html

<template>
	<view class="content-1">
		<view class="container-1" @touchstart="touchS" @touchmove="touchM" @touchend="touchE"
			:style="{'left':act_touch==index?leftStyle + 'upx':0}" :data-index="index" v-for="(i, index) in 3">
			<view>
				左滑删除左滑删除左滑删除左滑删除
			</view>
			<view class="delete-1" @click="delData">
				删除
			</view>
		</view>
	</view>
</template>

JavaScript

<script>
	export default {
		data() {
			return {
				leftStyle: 0,
				startX: 0,
				hiddenFlag: true,
				delBtnWidth: 220,
				act_touch: null,
			}
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {
			// 开始移动时
			touchS({
				touches
			}) {
				// startX记录开始移动的位置
				if (touches.length === 1) {
					this.startX = touches[0].clientX;
				}
				// hiddenFlag为true则是从右向左，为false则是从左向右
				if (this.leftStyle === 0) {
					this.hiddenFlag = true;
				} else {
					this.hiddenFlag = false;
				}
			},
			touchM(e) {
				if (e.touches.length === 1) {
					//手指移动时水平方向位置
					const moveX = e.touches[0].clientX;
					this.moveFunc(moveX);
					//获取手指触摸的是哪一项
					console.log(e.currentTarget.dataset.index)
					var index = e.currentTarget.dataset.index;
					this.act_touch = index;
				}
			},
			touchE({
				touches
			}) {
				const {
					leftStyle
				} = this;
				const {
					delBtnWidth
				} = this;
				// 如果停止滑动的距离大于二分之一则直接弹出删除按钮，不然则left为0
				if (-leftStyle > delBtnWidth / 2) {
					this.leftStyle = -delBtnWidth;
				} else {
					this.leftStyle = 0;
				}
			},
			moveFunc(moveX) {
				// 原始位置向左，leftStyle为小于0；原始位置向右，leftStyle为大于0
				// disX为相对最初位置的左右距离
				// 大于0为向右，小于0为向左
				const disX = moveX - this.startX;
				const delBtnWidth = this.delBtnWidth;
				let offsetNum = 0;
				if (-disX >= delBtnWidth && this.leftStyle === -delBtnWidth) {
					return;
				}
				console.log(disX, this.hiddenFlag);
				// this.hiddenFlag为true则是从左到右，则应该将container向左移动
				// this.hiddenFlag为false则是从右向左，则应该将container向右移动
				if (this.hiddenFlag) {
					// 此时container为最右边，则应该将container向左移动
					// disX大于0为相对原始位置的向右移动，则直接将offsetNum置为0
					// 否则为向左移动，offsetNum为disX相反的值，判断是否超过设置的最大位置
					if (disX == 0 || disX > 0) {
						offsetNum = 0;
					} else {
						offsetNum = disX;
						if (disX <= -delBtnWidth) {
							//控制手指移动距离最大值为删除按钮的宽度
							offsetNum = -delBtnWidth;
						}
					}
				} else {
					// 此时container为最左边，应该向右移动
					// disX小于0为相对原始位置的向左移动，则直接将offsetNum置为-this.delBtnWidth
					// 否则为相对原始位置的向右移动，此时应该将最大位置与向右位置的差值为此刻位置，判断是否为大于0
					if (disX < 0) {
						offsetNum = -this.delBtnWidth;
					} else {
						offsetNum = -this.delBtnWidth + disX;
						if (offsetNum > 0) {
							offsetNum = 0;
						}
					}
				}
				this.leftStyle = offsetNum;
			},
			//删除方法
			delData() {
				console.log("删除")
				uni.showModal({
					title: '提示',
					content: "确认删除该职位？",
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		}
	}
</script>

css

<style lang="scss">
	.content-1 {
		width: 100%;
		overflow-x: hidden;
		background-color: #f4f4f4;
		border-radius: none;
	}

	.container-1 {
		position: relative;
		margin-top: 26rpx;
		margin-bottom: 20upx;
		background-color: #fff;
		// padding: 20upx;
		height: 120rpx;
		line-height: 120rpx;
	}

	.delete-1 {
		position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		right: -107px;
		width: 65px;
		height: 120rpx;
		line-height: 120rpx;
		font-weight: 500;
		font-size: 16px;
		text-align: center;
		color: #FFFFFF;
		background: #FF1C1C;
		width: 106px;
	}
</style>