小程序uniapp实现左滑删除效果

LW0512

已于 2022-04-13 11:24:51 修改

阅读量6.9k

点赞数 5

文章标签：跨域小程序小程序组件通信

于 2021-11-17 15:24:48 首次发布

本文链接：https://blog.csdn.net/LW0512/article/details/121377782

版权

本文介绍了在uniapp小程序中如何实现左滑删除的效果，包括列表中的侧滑删除功能，确保删除操作的互斥性，以及在上下滑动时不影响侧滑删除的正常使用。文章提供了组件引入和使用的详细步骤，包括`del_slideLeft.vue`组件和`iconfont.css`文件的应用。

摘要由CSDN通过智能技术生成

小程序uniapp实现左滑删除效果

实现效果

1，列表中侧滑删除
2，删除不同时存在
3，上下滑动与侧滑删除不影响

在这里插入图片描述

在本页面引入组件并使用 (文件在文章的最下方附上)

在这里插入图片描述

在需要左滑删除的地方使用

<view v-for="(item, index) in csListArrl" :key="index" :data-index="index">
      <delSlideLeft :item="item" :data_transit="{ index: index, item: item }" @delItem="delItem">
        <view class="editItem">列表展示内容</view>
     </delSlideLeft>
</view>

//点击删除按钮事件
    delItem(e) {
   
      let that = this;
      that.csListArrl.splice(e.data.index, 1);
    },

引入组件里的两个文件

在这里插入图片描述

del_slideLeft.vue

<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: {
   
			
			data_transit: {
   
				type: Object,
				default () {
   
					return {
   }
				}
			},
			//可不传参
			item: {
   
				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);