uniapp 左滑删除效果一、效果二（2个方式自选其一）（整理）

效果图：

<template>
	<view class="">
		<scroll-view :scroll-y="isScroll" :style="{ height: windowHeight + 'px' }">
			<block :key="index" v-for="(item, index) in dataList">
				<view :data-index="index" class="order-item" @touchstart="drawStart" @touchmove="drawMove"
					@touchend="drawEnd" :style="{ right: item.right + 'rpx'}">
					<view class="content">{
    {
     item.content }}</view>
					<view class="remove" @click.self ="delItem">删除</view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	export default {
    
		data() {
    
			return {
    
				delBtnWidth: 160,
				dataList: [
					{
    
						content:  '1',
						right: 0
					},{
    
						content:  '2',
						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() {
    
				console.log('删除');
			}
		}
	}
</script>

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

	.remove {
    
		width: 160rpx;
		height: 100%;
		background-color: red;
		color: white;
		position: absolute;
		top: 0;
		right: -160rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 99;
	}
</style>

方法二：进入方法一

转载：原文更详细
原文链接：https://blog.csdn.net/weixin_41579185/article/details/117747252?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2-117747252-blog-123702049.pc_relevant_aa&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2-117747252-blog-123702049.pc_relevant_aa&utm_relevant_index=3