uniapp左滑删除

本文介绍了如何在uni-app中实现左滑删除功能,通过使用ay-operate插件,详细展示了插件代码及使用方法。在组件中,通过监听touch事件来控制内容的滑动和删除按钮的显示,同时提供了删除项的回调函数。在引用插件的页面中,将组件应用于列表,并在点击删除按钮时执行删除操作。示例代码包括了模板、脚本和样式部分,以及实际微信小程序的预览效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

uniapp左滑删除

欢迎使用ay-operate插件

最近有需求为:左滑删除,整理插件代码如下:

1.ay-operate插件

可去uniapp插件市场的操作组件:左滑删除,自定义任意内容插件页面下载.

属性
属性类型说明
data_transitObject需要传递数据的对象
itemObject显示对象,可不传参

下面是插件的 代码片.

<template>
	<view>
		<view class="box-slideLeft" >
			<view class="touch-item touch-slideLeft " @touchstart="touchS" @touchmove="touchM" @touchend="touchE"  :style="item_show.txtStyle">
				<slot />
			</view>
			
			<view class="touch-item del-box-touch-slideLeft cf-shuCenter"  @click="delItem(item_show)">
				<view class="iconfont icon-shanchu"></view>
			</view>

		</view>
	</view>
</template>

<script>
	
	export default {
		components: {

		},
		props: {
			//可不传参
			item: {
				type: Object,
				default () {
					return {}
				}
			},
			data_transit: {
				type: Object,
				default () {
					return {}
				}
			},
		},
		computed: {

		},
		
		data() {
			return {
				
				item_show : {},
				delBtnWidth: 60, //删除按钮宽度单位(rpx)
				startX: '',
			};
		},
		created:function(){
			//专门处理检查对象中,某字段是否存在的,如果存在返回 true 不存在返回 false
			let that = this ;
			let item = that.item ;
			if(!item.hasOwnProperty("txtStyle")){
				this.$set(this.item,'txtStyle','');//不需要初始化了
			}
			this.item_show = this.item ;
		},
		watch: {
			item(e){
				this.item_show = e ;
			},
		},
		methods: {
			//点击删除按钮事件
			delItem: function(e) {
				let that = this;
				let data ={
					item : e ,
					data : that.data_transit ,
				};
				this.$emit('delItem', data);
			},
			touchS: function(e) {
				let that = this;
				
				if (e.touches.length == 1) {
					//设置触摸起始点水平方向位置
					this.startX = e.touches[0].clientX
					
				}
			},
			touchM: function(e) {
				let that = this;
				
				if (e.touches.length == 1) {
					//手指移动时水平方向位置
					var moveX = e.touches[0].clientX;
					//手指起始点位置与移动期间的差值
					var disX = this.startX - moveX;
					var delBtnWidth = this.delBtnWidth;
					var txtStyle = "";
					if (disX == 0 || disX < 0) { //如果移动距离小于等于0,说明向右滑动,文本层位置不变
						txtStyle = "left:0px";
					} else if (disX > 0) { //移动距离大于0,文本层left值等于手指移动距离
						txtStyle = "left:-" + disX + "px";
						if (disX >= delBtnWidth) {
							//控制手指移动距离最大值为删除按钮的宽度
							txtStyle = "left:-" + delBtnWidth + "px";
						}
					}
					//获取手指触摸的是哪一项
					
					that.item_show.txtStyle = txtStyle;
					
				}
			},
			touchE: function(e) {
				let that = this;
				if (e.changedTouches.length == 1) {
					//手指移动结束后水平位置
					var endX = e.changedTouches[0].clientX;
					//触摸开始与结束,手指移动的距离
					var disX = this.startX - endX;
					var delBtnWidth = this.delBtnWidth;
					//如果距离小于删除按钮的1/2,不显示删除按钮
					var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";
					//获取手指触摸的是哪一项
					that.item_show.txtStyle = txtStyle;
					
				}
			},
			
		}

	}
</script>

<style lang="scss">
	@import './iconfont.css';//便于有删除图标
	
	.box-slideLeft {
		view {
			box-sizing: border-box;
		}
		position: relative;
		overflow: hidden;
		
		.touch-item {
			position: absolute;
			top: 0;
			padding: 10px 10px 10px;
			background-color: #FFFFFF;
			// border-radius: 10px;
			overflow: hidden;
		}
		
		.touch-slideLeft {
			position: relative;
			width: 100%;
			z-index: 5;
			transition: left 0.2s ease-in-out;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.del-box-touch-slideLeft {
			right: 0;
			float: left;
			width: 70px;
			height: 100%;
			line-height: 101px;
			background-color: #EA5863;
			border-radius: 0 10px 10px 0;
			color: #fff;
			font-size: 18px;
			font-weight: lighter;
			text-align: center;
		}
		.icon-shanchu{
			font-size: 44upx;
		}
		
		.cf-shuCenter{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
		}
	}

	
</style>



2.引用插件

可去uniapp插件市场的操作组件:左滑删除,自定义任意内容插件页面,下载项目

项目结构如下:
在这里插入图片描述

下面index.vue是引用插件的 代码片.

<template>
	<view>
		<view  v-for="(item,index) in result" :key="index" >
			<delSlideLeft :item="item" :data_transit="{index:index,item:item}" @delItem="delItem">
				<view style="color: #000000;">
					<view >
						<view >{{item.name}}</view>
						<view >{{item.name}}</view>
					</view>
					<view >
						<view >{{item.name}}</view>
					</view>
				</view>
				
			</delSlideLeft>
		</view>
	</view>
</template>

<script>
	import delSlideLeft from '@/components/ay-operate/del_slideLeft.vue'
	export default {
		components: {
			delSlideLeft,
		},
		
		data() {
			return {
				// 前台用户标志
				result: [{
					name: '左滑删除11111111111',
				}, {
					name: '左滑删除22222222222',
				}, 
				{
					name: '左滑删除333333333',
				}, ],
			};
		},
		
		methods: {
			//点击删除按钮事件
			delItem: function(e) {
				let that = this;
				that.result.splice(e.data.index,1)

			},
		}

	}
</script>

<style lang="scss">
	
</style>



微信小程序预览效果

地图轨迹预览效果

效果图

在这里插入图片描述

扫描公众号,了解更多实例分享:
实例分享

参考

uni-app左滑删除

### 实现 UniApp 列表项删除和右恢复功能 为了实现在 UniApp 中列表项的删除以及右恢复的功能,可以利用 `uni-swipe-action` 组件来完成这一交互效果[^1]。 下面是一个具体的实现方式: #### HTML 部分 定义一个包含多个可操作条目的列表,每个条目都包裹在一个 `uni-swipe-action` 标签内,并设置相应的按钮用于执行特定的操作。 ```html <template> <view class="container"> <!-- 使用 v-for 循环渲染数据 --> <block v-for="(item, index) in listData" :key="index"> <uni-swipe-action> <!-- 侧显示的内容 --> <template slot="left-options"> <button type="primary" @click="recoverItem(index)">恢复</button> </template> <!-- 主体内容 --> <view class="content">{{ item.text }}</view> <!-- 右侧显示的内容 --> <template slot="right-options"> <button type="warn" @click="deleteItem(index)">删除</button> </template> </uni-swipe-action> </block> </view> </template> ``` #### JavaScript 部分 编写逻辑处理函数以响应用户的点击事件并更新视图状态。 ```javascript <script> export default { data() { return { listData: [ { text: '第一条记录' }, { text: '第二条记录' } ] }; }, methods: { deleteItem(index) { this.listData.splice(index, 1); }, recoverItem(index) { console.log('此位置应加入实际业务逻辑'); } } }; </script> ``` 通过上述代码片段,在页面上展示了一个简单的列表结构,其中每一项都可以被用户向或向右动触发不同的动作。对于侧的“恢复”选项,这里仅打印了一条日志信息作为占位符;而在右侧,则实现了真正的移除元素的行为。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wx_h13813744

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值