第一种 没有特效 类似 显示隐藏

		<view>
			<list>
				<list-item v-for="(item, index) in list" :key="index" :data-index="index"
					:class="item.active ? 'item-active' : ''">
					<view class="item-content" @touchstart="onTouchStart(index, $event)"
						@touchmove="onTouchMove(index, $event)" @touchend="onTouchEnd(index, $event)"
						@mousedown="onMouseDown(index, $event)" @mousemove="onMouseMove(index, $event)"
						@mouseup="onMouseUp(index, $event)">
						<view class="item-title">{{item.title}}</view>
						<view class="item-delete" v-show="item.active" @click="onDeleteItem(index)">删除</view>
					</view>
				</list-item>
			</list>
		</view>

				list: [{
						title: '列表项1',
						active: false
					},
					{
						title: '列表项2',
						active: false
					},
					{
						title: '列表项3',
						active: false
					},
					{
						title: '列表项4',
						active: false
					},
					{
						title: '列表项5',
						active: false
					},
				],
				// 记录当前操作列表项的索引、起始滑动位置、当前滑动位置等信息
				currentIndex: -1,
				startX: 0,
				startY: 0,
				moveX: 0,
				moveY: 0,

			onTouchStart(index, event) {
				this.handleTouchStart(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);
			},
			onTouchMove(index, event) {
				this.handleTouchMove(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);
			},
			onTouchEnd(index, event) {
				this.handleTouchEnd(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);
			},
			onMouseDown(index, event) {
				this.handleTouchStart(index, event.pageX, event.pageY);
			},
			onMouseMove(index, event) {
				this.handleTouchMove(index, event.pageX, event.pageY);
			},
			onMouseUp(index, event) {
				this.handleTouchEnd(index, event.pageX, event.pageY);
			},
			handleTouchStart(index, x, y) {
				if (this.currentIndex !== -1) {
					return;
				}
				this.currentIndex = index;
				this.startX = x;
				this.startY = y;
			},
			handleTouchMove(index, x, y) {
				if (this.currentIndex !== index) {
					return;
				}
				this.moveX = x;
				this.moveY = y;
				const deltaX = this.moveX - this.startX;
				const deltaY = this.moveY - this.startY;
				if (Math.abs(deltaX) > Math.abs(deltaY)) {
					if (deltaX < 0) {
						this.list[index].active = true;
					} else {
						this.list[index].active = false;
					}
				}
			},
			handleTouchEnd(index, x, y) {
				if (this.currentIndex !== index) {
					return;
				}
				this.currentIndex = -1;
				this.moveX = x;
				this.moveY = y;
				const deltaX = this.moveX - this.startX;
				const deltaY = this.moveY - this.startY;
				if (Math.abs(deltaX) > Math.abs(deltaY)) {
					if (deltaX < 0) {
						this.list[index].active = true;
					} else {
						this.list[index].active = false;
					}
				}
			},
			onDeleteItem(index) {
				this.list.splice(index, 1);
			},

	.item-active .item-content {
		transform: translateX(-60px);
	}

	.item-content {
		position: relative;
		height: 60px;
		padding: 0 20px;
		line-height: 60px;
		background-color: #fff;
		border-bottom: 1px solid #eee;
		overflow: hidden;

		.item-delete {
			position: absolute;
			top: 0;
			right: 0;
			height: 100%;
			padding: 0 20px;
			line-height: 60px;
			background-color: #f00;
			color: #fff;
			font-size: 18px;
		}
	}