uni-app 实现左滑删除两种数据结构（超详细附源码）

已于 2022-03-18 11:27:45 修改
阅读量1.6k 收藏 1
点赞数 1
分类专栏： uni-app 文章标签： 数据结构
于 2021-12-15 16:14:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42543264/article/details/121955024
版权

我们先来看第一种简单的二维数组

来张效果图

实现代码

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

第二种三维数组

来张效果图

实现代码

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

 两种相差无异，只不过是取值不同

如果对你有用，关注一下博主的小程序，登录一下给予支持，以后有什么开源好用的源码都会上传到小程序 

 

青衫折扇
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp自定义左滑删除组件
m0_49440146的博客
12-12 1300
自定义侧滑组件
uniapp 购物车实现左滑删除商品
qq_40326609的博客
01-17 770
uniapp 购物车实现左滑删除商品
Uniapp-左滑删除
Hannah_Hannah_的博客
11-20 612
主要有touchstart、touchmove、touchend、和一个动态绑定样式 :style。一般运用在多个商品列表中。
uniapp左滑删除
m0_60827885的博客
07-10 3174
在本页面引入组件并使用在需要左滑删除的地方使用。
【uni-app】uniapp如何实现左滑删除以及改造uni-ui中的swiperAction
搬砖小鱼，请多指教呦
03-23 1万+
左滑删除 或者 置顶之类的功能我们经常要实现，类似于微信的删除聊天框的结构 我就不贴图了 1-如何在uniapp中实现左滑删除 我使用的是uni-ui中的swiperAction 不得不说 性能还是不错的。大家想自己手动封装这个框架也是可以的，可以下载下来源码看看人家的实现思路，在h5和小程序上主要就是使用touchstart和touchend来监控的 插件地址：uni-swipe-action 滑动操作 - DCloud 插件市场 文档地址：action文档 代码参考：这里演示的是最常用的 可以
uniapp实现左滑删除的效果
hcy5201314521的博客
12-29 1094
参考的上面的博客。
uniapp开发小程序-显示左滑删除效果
weixin_48596030的博客
06-07 2619
/去掉自定义组件里的图标。
uni-app列表项实现左划操作功能
02-25
在uni-app框架中，我们可以利用其强大的组件化特性来实现丰富的交互效果，比如在列表项上实现左滑操作功能。这种功能常见于很多应用中，如邮件客户端、社交应用等，用户通过左滑可以触发一些快捷操作，如删除、标记...
uni-app uni-data-picker 省市区数据表
06-16
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
uni-app快速入门源码 uni-app开发经典源码项目 uni-app可快速实现对接进销存
12-09
uni-app快速入门源码 uni-app开发经典源码项目 uni-app可快速实现对接企业进销存、OA、ERP系统 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、...
Uni-app 实现图片上传、删除、预览、压缩；
02-19
Uni-app 实现图片上传、删除、预览、压缩； 真正的开箱即用。
uni-app调用Android原生可以实现通信及打开WiFi
01-13
【uni-app调用Android原生实现通信及打开WiFi】\n\nuni-app是一个跨平台的前端框架，允许开发者使用一套代码编写应用，同时在iOS、Android、H5等多个平台上运行。在uni-app中，通过调用原生插件，我们可以实现与...
uniapp左滑删除功能、小程序购物车左滑删除功能
weixin_52941842的博客
09-29 1444
uniapp左滑删除功能、小程序购物车左滑删除功能
小程序uniapp实现左滑删除效果
LW0512的博客
11-17 6745
微信小程序实现左滑删除效果 实现效果 1，列表中侧滑删除 2，删除不同时存在 3，上下滑动与侧滑删除不影响 在本页面引入组件并使用 https://blog.csdn.net/LW0512/article/details/121378385 在需要左滑删除的地方使用 <view v-for="(item, index) in csListArrl" :key="index" :data-index="index"> <delSlideLeft :item="item" :d
uni-app H5 页面跳转问题 刷新之后页面栈消失
qq_42420412的博客
02-24 2909
问题描述： 开发h5时要求从某个页面直接跳转到tab首页，并且要清空之前的页面栈。试了下relaunch跳转也没用。 解决方案： 使用navigateBack就可以达到跳转的目的，但是如果浏览器页面刷新，这个方法就是失效了。 可以使用getCurrentPages方法可以获取当前页面的实例，判断页面是否刷新。再对两种跳转情况进行处理。 const pages = getCurrentPages() if (pages && pages.length > 1) { uni
【小程序】uniapp开发小程序，获取页面栈，并利用页面栈更改data
qq_44092970的博客
09-04 2208
var pages = getCurrentPages();//获取当前页面栈的实例，以数组形式按栈的顺序给出，首元素为首页，最后一个元素为当前页面。 let prevPage = pages[pages.length - 2]; // 上一页的数据 prevPage.$vm.cityName=city //修改上一个页面中data的cityName ...
如何实现一个左滑出现删除按钮的功能
baidu_41601048的博客
08-05 583
利用uniapp实现一个左滑出现删除按钮的效果。实现平滑的动画效果
uniapp中APP端使用页面栈无效，且报错问题解决
qq_43351090的博客
11-18 2404
代码如下： let pages = getCurrentPages(); // 当前页， let prevPage = pages[pages.length - 2]; // 上一页 prevPage.xx = 1;//设置xx属性为1 在h5端不报错，可正常使用。 app端报错： Property or method “toJSON” is not defined on the instance but referenced during render. Make sure that this pro
uni-app 实现轮播图（完整版）
热门推荐
青衫折扇的博客
10-28 1万+
先来张效果图吧 代码不多，也不难，这里直接上代码了，复制就可以用 <template> <view class="content"> <!-- 轮播图 --> <swiper class="image-container" previous-margin="45rpx" next-margin="45rpx" circular autoplay @change="swiperChange"> <swiper-item :cla.
uni-app实现聊天
最新发布
03-12
在接收到新消息时，可以使用uni-app提供的数据绑定功能，将新消息添加到聊天记录中，并通过`<scroll-view>`组件滚动到最新的消息位置。 此外，你还可以使用uni-app提供的其他功能来增强聊天体验，比如使用`<image>`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值