【vue移动端】实现左滑删除功能—直接套用即可

近期做移动app项目时，需实现一个类似qq的左滑删除功能，找了很多案例，多多少少不太贴合，附上比较贴合的方法，记录一下。
实现效果图：
左滑下一个列表的同时，上一个滑动的列表自动归位。

实现思路：
通过touch事件获取起始位置跟终点位置的差值进行判断左滑

html部分：

<div class="content" v-for="(item, index) in dataList" :key="index">
	<div class="listItem" data-type="0">
		<div class="list" @touchstart.capture="touchStart" @touchend.capture="touchEnd">
			内容区
		</div>
		<div class="delete" :data-index="index" @click="deleteInfo(index)">刪除</div>
	</div>
</div>

内容区根据需求存放信息

CSS部分：

.content {
    margin-top: 0.2778rem;
    padding: 0 0.2778rem;
    background-color: #ffffff;
    border-bottom: 1px solid #d9daeb;
    position: relative;
    overflow: hidden;
}

.listItem{
    position: relative;
    // 左滑动画效果
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    text-align: left;
}

// 左滑动画效果
.listItem[data-type='0'] {
    transform: translate3d(0, 0, 0);    
}
.listItem[data-type='1'] {
    transform: translate3d(-1.555rem, 0, 0);
}
.listItem:after {
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    z-index: 2;
}

.list{
    overflow: hidden;
    position: relative;
}

.delete{
    padding: 0 0.2778rem;
    height: 100%;
    width: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ff0000;
    border-bottom: 3px solid #ff0000;
    color: #ffffff;
    font-size: .3611rem;
    position: absolute;
    top: 0;
    right: -1.9rem;
}

JS部分：

// 滑动开始
touchStart(e) {
	// 记录初始位置
	this.startX = e.touches[0].clientX
},

// 滑动结束
touchEnd(e) {
	// 当前滑动的父级元素
	let parentElement = e.currentTarget.parentElement
	// 记录结束位置
	this.endX = e.changedTouches[0].clientX
	// 左滑
	if (parentElement.dataset.type == 0 && this.startX - this.endX > 100) {
		this.restSlide()
		parentElement.dataset.type = 1
	}
	// 右滑
	if (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
		this.restSlide()
		parentElement.dataset.type = 0
	}
	this.startX = 0
	this.endX = 0
},

// 复位滑块
restSlide() {
	let listItems = document.querySelectorAll('.listItem')
	for (let i = 0; i < listItems.length; i++) {
		// 复位
		listItems[i].dataset.type = 0
	}
},

// 判断当前是否有滑块处于滑动状态
checkSlide() {
	let listItems = document.querySelectorAll('.listItem')
	for (let i = 0; i < listItems.length; i++) {
		if (listItems[i].dataset.type == 1) {
			return true
		}
	}
	return false
},

// 删除
deleteInfo (index) {
	const _this = this;
	_this.$vux.confirm.show({
			title:'提示',
			content: '是否删除此联系人？',
			onCancel () {},
			onConfirm () {
				// 根据实际需要调用相关接口
				// 视图层面删除节点
				_this.dataList.splice(index, 1);
			}
	});			
}

当然，还有很多通过封装组件的方法进行实现，自行探索，谢邀指正。