uni 实现向左滑动出现删除

最新推荐文章于 2025-01-17 14:33:28 发布

原创最新推荐文章于 2025-01-17 14:33:28 发布 · 1.1k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文档介绍了一个Vue组件的实现，用于展示一个具有滑动显示删除按钮的效果。当用户在内容视图上滑动时，对应的内容块会向左滑出，露出删除按钮。通过touchstart、touchmove和touchend事件监听用户的滑动操作，并根据滑动距离决定是否显示删除按钮。点击删除按钮后，会弹出确认删除的提示对话框。这个组件可用于需要滑动删除功能的列表或卡片视图中。

效果图：

templete：

<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>

data：

leftStyle: 0,
				startX: 0,
				hiddenFlag: true,
				delBtnWidth: 220,
				act_touch:null,

js：

// 开始移动时
			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('用户点击取消');
						}
					}
				});
			},

css：

.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;
	}
	.delete-1{
		position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		right: -107px;
		width: 65px;
		height: 38px;
		line-height: 39px;
		font-weight: 500;
		font-size: 16px;
		text-align: center;
		color: #FFFFFF;
		background: #FF1C1C;
		width: 106px;
	}