uni-app implements left sliding to delete two data structures (super detailed source code attached)

Let's first look at the first simple two-dimensional array

Come to the renderings

Implementation code

<template>
	<view class="content unify-margin">
		<view v-if="list.length !== 0">
			<!-- 间隔 -->
			<uni-interval height="8px"></uni-interval>

			<view class="item unify-relative unify-padding unify-background-color unify-radius"
				v-for="(item,index) in list" :key="index" @touchstart="drawStart" :data-index="index"
				@touchmove="drawMove" @touchend="drawEnd" :style="'right:'+item.right+ 'rpx'">
				<view class="item-nk unify-flex" @tap="tapCut(item)">
					<image class="image unify-block unify-radius" :src="item.image || errorImage" mode=""></image>
					<view class="right unify-relative unify-weight">
						<view class="title unify-font-size-line-astrict">{
   
   {item.name}}</view>
						<view class="right-data unify-flex unify-absolute">
							<view class="right-score">
								4.8分
								<text class="right-appraise">| 66人评价</text>
							</view>
							<view class="right-distance">1km</view>
						</view>
					</view>
				</view>

				<view class="remove" @tap="tapDel(index)">删除</view>
			</view>

			<!-- 间隔 -->
			<uni-interval height="30px"></uni-interval>

			<!-- 加载更多 -->
			<uni-loading-more :loadingType="loadingType" :contentText="contentText"></uni-loading-more>

			<!-- 间隔 -->
			<uni-interval height="30px"></uni-interval>
		</view>

		<!-- 没有数据 -->
		<uni-null desc="没有收藏哦! 赶紧去收藏吧~" v-else></uni-null>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				errorImage: this.$mAssetsPath.errorImage, // 图片加载失败填充
				list: [{
					image: '',
					name: '食悦阁中餐食补',
				}],
				delBtnWidth: 120, // 滑动距离
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: '只有这么多了'
				},
				pageNum: 1, // 页码
				pageSize: 10, // 每页显示数量
				loadingType: 2, // 加载动画
			}
		},
		methods: {
			// 切换函数处理事件
			tapCut(e) {
				for (var index in this.list) { // 滑动初始化
					this.$set(this.list[index], 'right', 0);
				}
			},

			// 删除函数处理事件
			tapDel(e) {
				uni.showModal({
					title: '提示',
					content: '确认删除该收藏？',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							let list = this.list;
							list.forEach((item, index) => {
								if (e === index) {
									list.splice(index, 1)
								}
							})
							this.list = list;
							this.$mHelper.toast('删除成功')
						}
					}
				})
			},

			//开始触摸滑动
			drawStart(e) {
				var touch = e.touches[0];
				this.startX = touch.clientX;
			},
			//触摸滑动
			drawMove(e) {
				for (var index in this.list) {
					this.$set(this.list[index], 'right', 0);
				}
				var touch = e.touches[0];
				var item = this.list[e.currentTarget.dataset.index];
				var disX = this.startX - touch.clientX;
				if (disX >= 20) {
					if (disX > this.delBtnWidth) {
						disX = this.delBtnWidth;
					}
					this.$set(this.list[e.currentTarget.dataset.index], 'right', disX);
				} else {
					this.$set(this.list[e.currentTarget.dataset.index], 'right', 0);
				}
			},
			//触摸滑动结束
			drawEnd(e) {
				var item = this.list[e.currentTarget.dataset.index];
				if (item.right >= this.delBtnWidth / 2) {
					this.$set(this.list[e.currentTarget.dataset.index], 'right', this.delBtnWidth);
				} else {
					this.$set(this.list[e.currentTarget.dataset.index], 'right', 0);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	$image: 110rpx;
	$text-size: 28rpx;

	.content {

		.item {
			height: 142rpx;
			margin-top: 9px;


			.item-nk {
				height: inherit;
				align-items: center;
				justify-content: space-between;
			}

			.image {
				width: $image;
				height: $image;
			}

			.right {
				width: 78%;
				height: $image;

				.title {
					font-size: $text-size;
				}

				.right-data {
					width: 100%;
					align-items: center;
					justify-content: space-between;
					bottom: 0;

					.right-score {
						font-size: $text-size;
						color: $uni-text-color-orange;

						.right-appraise {
							font-size: 24rpx;
							color: $uni-text-color-grey;
							margin-left: 10rpx;
							font-weight: 400;
						}
					}

					.right-distance {
						font-size: 24rpx;
						color: $uni-text-color-grey;
						font-weight: 400;
					}
				}
			}

			// 删除
			.remove {
				width: 108rpx;
				text-align: center;
				height: inherit;
				background-color: #FF0000;
				color: white;
				position: absolute;
				right: -154rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 20rpx 0 0 20rpx;
				font-size: 24rpx;
				top: 0;
				bottom: 0;
				margin: auto;
			}
		}
	}
</style>

The second three-dimensional array

Come to the renderings

Implementation code

<template>
	<view class="content unify-margin">
		<view v-if="list.length !== 0">
			<view class="outer-sphere" v-for="(item1,index1) in list" :key="index1">
				<!-- 时间 -->
				<view class="time">{
   
   {item1.time}}</view>

				<uni-interval height="5px"></uni-interval>

				<view class="item unify-relative unify-padding unify-background-color unify-radius"
					v-for="(item2,index2) in item1.array" :key="index2" @touchstart="drawStart" :data-index1="index1"
					:data-index2="index2" @touchmove="drawMove" @touchend="drawEnd"
					:style="'right:'+item2.right+ 'rpx'">
					<view class="item-nk unify-flex" @tap="tapCut(item2)">
						<image class="image unify-block unify-radius" :src="item2.image || errorImage" mode=""></image>
						<view class="right unify-relative unify-weight">
							<view class="title unify-font-size-line-astrict">{
   
   {item2.name}}</view>
							<view class="right-data unify-flex unify-absolute">
								<view class="right-score">
									4.8分
									<text class="right-appraise">| 66人评价</text>
								</view>
								<view class="right-distance">1km</view>
							</view>
						</view>
					</view>

					<view class="remove" @tap="tapDel(index2)">删除</view>
				</view>
			</view>

			<!-- 间隔 -->
			<uni-interval height="30px"></uni-interval>

			<!-- 加载更多 -->
			<uni-loading-more :loadingType="loadingType" :contentText="contentText"></uni-loading-more>

			<!-- 间隔 -->
			<uni-interval height="30px"></uni-interval>
		</view>

		<!-- 没有数据 -->
		<uni-null desc="没有收藏哦! 赶紧去收藏吧~" v-else></uni-null>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				errorImage: this.$mAssetsPath.errorImage, // 图片加载失败填充
				list: [{
					time: '12-15',
					array: [{
						image: '',
						name: '食悦阁中餐食补',
					}, {
						image: '',
						name: '食悦阁中餐食补',
					}, {
						image: '',
						name: '食悦阁中餐食补',
					}]
				}, {
					time: '12-15',
					array: [{
						image: '',
						name: '食悦阁中餐食补',
					}, {
						image: '',
						name: '食悦阁中餐食补',
					}, {
						image: '',
						name: '食悦阁中餐食补',
					}]
				}],
				delBtnWidth: 120, // 滑动距离
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: '只有这么多了'
				},
				pageNum: 1, // 页码
				pageSize: 10, // 每页显示数量
				loadingType: 2, // 加载动画
			}
		},
		methods: {
			// 切换函数处理事件
			tapCut(e) {
				let list = this.list;
				for (var index1 in list) { // 滑动初始化
					for (var index2 in list[index1].array) {
						this.$set(list[index1].array[index2], 'right', 0);
					}
				}
			},

			// 删除函数处理事件
			tapDel(e) {
				uni.showModal({
					title: '提示',
					content: '确认删除该收藏？',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							let list = this.list;
							list.forEach((item1, index1) => {
								item1.array.forEach((item2, index2) => {
									if (e === index2) {
										item1.array.splice(index2, 1)
									}
								})
								if (item1.array.length === 0) {
									list.splice(index1, 1)
								}
							})
							this.list = list;
							this.$mHelper.toast('删除成功')
						}
					}
				})
			},

			//开始触摸滑动
			drawStart(e) {
				var touch = e.touches[0];
				this.startX = touch.clientX;
			},
			//触摸滑动
			drawMove(e) {
				for (var index1 in this.list) {
					for (var index2 in this.list[index1].array) {
						this.$set(this.list[index1].array[index2], 'right', 0);
					}
				}
				var touch = e.touches[0];
				var item = this.list[e.currentTarget.dataset.index1].array[e.currentTarget.dataset.index2];
				var disX = this.startX - touch.clientX;
				if (disX >= 20) {
					if (disX > this.delBtnWidth) {
						disX = this.delBtnWidth;
					}
					this.$set(this.list[e.currentTarget.dataset.index1].array[e.currentTarget.dataset.index2], 'right',
						disX);
				} else {
					this.$set(this.list[e.currentTarget.dataset.index1].array[e.currentTarget.dataset.index2], 'right', 0);
				}
			},
			//触摸滑动结束
			drawEnd(e) {
				var item = this.list[e.currentTarget.dataset.index1].array[e.currentTarget.dataset.index2];
				if (item.right >= this.delBtnWidth / 2) {
					this.$set(this.list[e.currentTarget.dataset.index1].array[e.currentTarget.dataset.index2], 'right',
						this.delBtnWidth);
				} else {
					this.$set(this.list[e.currentTarget.dataset.index1].array[e.currentTarget.dataset.index2], 'right', 0);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	$image: 110rpx;
	$text-size: 28rpx;

	.content {

		.outer-sphere:first-child {
			margin-top: 17px;
		}

		.outer-sphere {
			margin-top: 26px;
		}

		.time {
			font-size: $text-size;
			color: $uni-text-color-grey;
		}

		.item {
			height: 142rpx;
			margin-top: 9px;


			.item-nk {
				height: inherit;
				align-items: center;
				justify-content: space-between;
			}

			.image {
				width: $image;
				height: $image;
			}

			.right {
				width: 78%;
				height: $image;

				.title {
					font-size: $text-size;
				}

				.right-data {
					width: 100%;
					align-items: center;
					justify-content: space-between;
					bottom: 0;

					.right-score {
						font-size: $text-size;
						color: $uni-text-color-orange;

						.right-appraise {
							font-size: 24rpx;
							color: $uni-text-color-grey;
							margin-left: 10rpx;
							font-weight: 400;
						}
					}

					.right-distance {
						font-size: 24rpx;
						color: $uni-text-color-grey;
						font-weight: 400;
					}
				}
			}

			// 删除
			.remove {
				width: 108rpx;
				text-align: center;
				height: inherit;
				background-color: #FF0000;
				color: white;
				position: absolute;
				right: -154rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 20rpx 0 0 20rpx;
				font-size: 24rpx;
				top: 0;
				bottom: 0;
				margin: auto;
			}
		}
	}
</style>

 The difference between the two is the same, but the value is different

If it is useful to you, pay attention to the blogger's applet, log in to give support, and any open source and useful source code will be uploaded to the applet in the future