uniapp左滑删除

最新推荐文章于 2025-11-07 16:57:10 发布

原创

最新推荐文章于 2025-11-07 16:57:10 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

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

uniapp左滑删除

欢迎使用ay-operate插件

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

1.ay-operate插件

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

属性

属性	类型	说明
data_transit	Object	需要传递数据的对象
item	Object	显示对象，可不传参

下面是插件的 代码片.

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