uniapp实现左滑删除的效果

uniapp 左滑删除效果一、效果二（2个方式自选其一）（整理）_uniapp单元左滑操作-优快云博客

参考的上面的博客

下面是自己的实现的效果：

代码：

<template>
	<view class="">
		<scroll-view :scroll-y="isScroll" :style="{ height: windowHeight + 'px' }">
			<block :key="item.id" v-for="(item, index) in dataList">
				<view :data-index="index" class="shop-cart-list-item" @touchstart="drawStart" @touchmove="drawMove"
					@touchend="drawEnd" :style="{ right: item.right + 'rpx'}">
					<image src="../../static/qhj.png" mode="widthFix" class="img"></image>
					<view class="desc">
						<view class="title">啦啦啦啦啦啦啊啊啊啊啊啊啊啊啊啊啊啊啊啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</view>
						<view class="num">
							<view class="price"><text>￥</text> 999</view>
							<view class="shu">
								<text class="jian" :class="item.number==1?'disable':''" @click="onJian(item)">-</text>
								<text class="num">{{item.number}}</text>
								<text class="jia" @click="onJia(item)">+</text>
							</view>
						</view>
					</view>
					<view class="content">{{ item.content }}</view>
					<view @click="delItem(index, $event)">
					<view class="remove" >删除</view>
					</view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				delBtnWidth: 160,
				dataList: [{
					id: 1,
					number: '1',
					content: '1',
					right: 0
				}, {
					id: 2,
					number: '1',
					content: '2',
					right: 0
				}, {
					id: 3,
					number: '1',
					content: '3',
					right: 0
				}, {
					id: 4,
					number: '1',
					content: '4',
					right: 0
				}, {
					id: 5,
					number: '1',
					content: '5',
					right: 0
				}, {
					id: 6,
					number: '1',
					content: '6',
					right: 0
				}, {
					id: 7,
					number: '1',
					content: '7',
					right: 0
				}, {
					id: 8,
					number: '1',
					content: '8',
					right: 0
				}, ],
				isScroll: true,
				windowHeight: 0
			};
		},
		onLoad: function(options) {
			var that = this;
			wx.getSystemInfo({
				success: function(res) {
					that.windowHeight = res.windowHeight;
				}
			});
		},
		methods: {
			drawStart: function(e) {
				// console.log("drawStart");
				var touch = e.touches[0];
				console.log(touch, 'touch');
				for (var index in this.dataList) {
					this.dataList[index].right = 0;
				}
				this.startX = touch.clientX;
			},
			drawMove: function(e) {
				var touch = e.touches[0];
				var item = this.dataList[e.currentTarget.dataset.index];
				var disX = this.startX - touch.clientX;

				if (disX >= 20) {
					if (disX > this.delBtnWidth) {
						disX = this.delBtnWidth;
					}
					this.isScroll = false;
					this.dataList[e.currentTarget.dataset.index].right = disX;
				} else {
					this.isScroll = true;
					this.dataList[e.currentTarget.dataset.index].right = 0;
				}
			},
			drawEnd: function(e) {
				var item = this.dataList[e.currentTarget.dataset.index];
				if (item.right >= this.delBtnWidth / 2) {
					this.isScroll = true;
					this.dataList[e.currentTarget.dataset.index].right = this.delBtnWidth;
				} else {
					this.isScroll = true;
					this.dataList[e.currentTarget.dataset.index].right = 0;
				}
			},
			delItem(index, event) {
				 console.log("Deleting item at index:", index);
			    event.stopPropagation(); // 阻止事件冒泡
			    event.preventDefault(); // 阻止默认行为
			    this.dataList.splice(index, 1);
			},
			//商品数量变化——加
			onJia(item) {
			    item.number = parseInt(item.number) + 1;
			},
			//商品数量变化——减
			onJian(item) {
			    if (parseInt(item.number) > 1) {
			        item.number = parseInt(item.number) - 1;
			    }
			}
		
		}
	}
</script>

<style scoped>
	.shop-cart-list-item {
		height: 240rpx;
		width: 100%;
		display: flex;
		position: relative;
		background-color: #FFFFFF;
		transition: all 0.2s;
		margin-bottom: 50rpx;

		.radio {
			line-height: 180rpx;
			margin-right: 20rpx;
		}

		.img {
			width: 180rpx;
			height: 180rpx;
			flex-shrink: 0;
		}

		.desc {
			width: 100%;
			padding: 0 20rpx;

			.title {
				color: #101010;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.num {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;

				.price {
					font-size: 36rpx;
					color: #FF1616;
					font-weight: bold;
				}

				.shu {
					color: #888888;

					.jian,
					.jia,
					.num {
						width: 40rpx;
						height: 40rpx;
						line-height: 40rpx;
						display: inline-block;
						text-align: center;
						color: #333333;
					}

					.jian,
					.jia {
						border: 1px solid #333333;
						border-radius: 100%;
					}

					.disable {
						border-color: #888888;
						color: #888888;
					}
				}
			}
		}
	}

	.remove {
		width: 180rpx;
		/* 增加宽度 */
		height: 100%;
		background-color: red;
		color: white;
		position: absolute;
		top: 0;
		right: -180rpx;
		/* 根据新的宽度调整 */
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 100;
		/* 确保是最高 */
	}
</style>