uniapp实现左滑删除（详解）

例：

API参考地址：API | uni-app官网

其中必须包含的数据：

结构： <scroll-view :scroll-y="isScroll">        </scroll-view>

方法： touchstart()        touchmove()        touchend()

数据：

• :style="{ right: item.right + 'rpx'}" 控制删除框左边的定位距离
• delBtnWidth: 160, //左滑默认宽度  注意更改时需要保持 .remove{width和right统一}
• isScroll: true, //是否滑动
• startX: "", //初始的X

具体实现代码例：

部分注释用于解释

<template>
	<view class="bg">
		<scroll-view :scroll-y="isScroll">
			<block v-for="(item,index) in noticeList" :key="index">
				<view :data-index="index" class="shop-cart-list-item" @touchstart="drawStart" @touchmove="drawMove"
					@touchend="drawEnd" :style="{ right: item.right + 'rpx'}">
					<view class="notice_list">
						<uni-list-chat :title="item.title" avatar="../../static/banner/logo.png" :note="item.content"
							:time="item.createTime" badge-positon="left" :badge-text="item.readFlag==0 ? 'dot' : '' "
							:clickable="true" @click="msgDetail(item)"></uni-list-chat>
					</view>
					<view class="remove" @click.self="delItem(item.id)">删除</view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				delBtnWidth: 160, //左滑默认宽度  注意更改时需要保持 .remove{width和right统一}
				isScroll: true, //是否有Y轴
				startX: "", //初始的X
			}
		},
		methods: {
			drawStart(e) {
				console.log("开始", e)
				let touch = e.touches[0];
				console.log(touch, 'touch');
				for (let index in this.noticeList) {
					this.noticeList[index].right = 0;
				} //保证滑动前为0，和其它已滑动的为0
				this.startX = touch.clientX;
			},
			drawMove(e) {
				//获取从点击到滑动离开鼠标X轴的距离，大于20将滑动的值赋为delBtnWidth(160),否则为0
				console.log("移动", e)
				let touch = e.touches[0]
				let item = this.noticeList[e.currentTarget.dataset.index]
				let disX = this.startX - touch.clientX
				if (disX >= 20) {
					if (disX > this.delBtnWidth) {
						disX = this.delBtnWidth;
					}
					this.isScroll = false;
					this.noticeList[e.currentTarget.dataset.index].right = disX;
				} else {
					this.isScroll = true;
					this.noticeList[e.currentTarget.dataset.index].right = 0;
				}
			},
			drawEnd(e) {
				//滑动结束判断滑动相减的值是否>160/2,大于则取值否则取值为0
				console.log("结束", e)
				let item = this.noticeList[e.currentTarget.dataset.index];
				// 下面代码同来判断是左滑还是右滑
				if (item.right >= this.delBtnWidth / 2) {
					this.isScroll = true;
					this.noticeList[e.currentTarget.dataset.index].right = this.delBtnWidth;
				} else {
					this.isScroll = true;
					this.noticeList[e.currentTarget.dataset.index].right = 0;
				}
			},
			//删除消息
			delItem() {
				console.log('删除', item.id);
			},
		}
	}
</script>

<style scoped lang="scss">
	.shop-cart-list-item {
		width: 100%;
		display: flex;
		position: relative;
		background-color: #FFFFFF;
		transition: all 0.2s;
	}

	/* 左划删除 */
	.remove {
		width: 160rpx;
		height: 100%;
		background-color: red;
		color: white;
		position: absolute;
		top: 0;
		right: -160rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		z-index: 99;
	}
</style>