写在前面
这个组件是之前开发中用到的，也是参考了网上的一些文件，现在整理发出来，有助于自己学习。毕竟当时折腾了好久，好好整理一下。里边的注释自认为还是挺齐全的，还有不理解的评论。
首先说一下该组件的注意事项
1，提供左滑删除功能
2，滑动某一个时其他的不显示删除按钮
3，点击删除按钮后隐藏删除（看情况）
4，垂直（上下）滑动超过30不触发左滑功能
5，解决与上拉加载下拉刷新冲突问题
6，此组件适用于移动端
7,项目中是用的rem适配
具体是如何适配的，请移步前端开发公共css，js笔记
step一,首先在components下边新建一个文件，leftSlideDelete文件夹，里边新建一个index.vue文件。
<template>
<div>
<div class="slider-item" data-type="0">
<div class="content"
@touchstart='touchStart'
@touchmove='touchMove'
@touchend='touchEnd'
:style="deleteSlider">
<!-- 插槽中放具体项目中需要内容 -->
<slot></slot>
</div>
<div class="remove" ref='remove' @click.prevent="deleteItem(index)">
<img src="../../static/img/我的 未选中@2x.png" height="48" width="48"/>
<span>删除我</span>
</div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
export default {
props: {
index: Number
},
data() {
return {
startX: 0, //触摸位置
endX: 0, //结束位置
moveX: 0, //滑动时的位置
disX: 0, //移动距离
deleteSlider: '',//滑动时的效果,使用v-bind:style="deleteSlider"
lastIndex: "",
startY: 0, //触摸位置
endY: 0, //结束位置
moveY: 0, //滑动时的位置
}
},
methods: {
touchStart(ev){
console.log("index:", this.index);
this.restSlide();
ev = ev || event
//tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
if (ev.touches.length == 1) {
// 记录开始位置
this.startX = ev.touches[0].clientX;
this.startY = ev.touches[0].clientY;
}
},
touchMove(ev){
ev = ev || event;
let parentElement = ev.currentTarget.parentElement;
//获取删除按钮的宽度，此宽度为滑块左滑的最大距离
let wd = this.$refs.remove.offsetWidth;
if (ev.touches.length == 1) {
// 滑动时距离浏览器左侧实时距离
this.moveY = ev.touches[0].clientY
this.moveX = ev.touches[0].clientX
if (Math.abs(this.moveY - this.startY) < 30) {
//起始位置减去 实时的滑动的距离，得到手指实时偏移距离
this.disX = this.startX - this.moveX;
// 如果是向右滑动或者不滑动，不改变滑块的位置
if (this.disX < wd / 2 || this.disX == 0) {
this.deleteSlider = "transform:translateX(0px)";
parentElement.dataset.type = 0;
// 大于0，表示左滑了，此时滑块开始滑动
} else if (this.disX > wd / 2) {
//具体滑动距离我取的是 手指偏移距离*5。
parentElement.dataset.type = 1;
this.deleteSlider = "transform:translateX(-" + this.disX + "px)";
// 最大也只能等于删除按钮宽度
if (this.disX*1.5 >= wd) {
parentElement.dataset.type = 1;
this.deleteSlider = "transform:translateX(-" + wd + "px)";
}
}
}
}
},
touchEnd(ev){
ev = ev || event;
let parentElement = ev.currentTarget.parentElement;
let wd = this.$refs.remove.offsetWidth;
if (ev.changedTouches.length == 1) {
let endY = ev.changedTouches[0].clientY;
if (Math.abs(this.startY - endY) < 30) {
let endX = ev.changedTouches[0].clientX;
this.disX = this.startX - endX;
console.log("touchEndthis.disX:", this.disX)
//如果距离小于删除按钮一半,强行回到起点
if (this.disX < (wd /2 )) {
parentElement.dataset.type = 0;
this.deleteSlider = "transform:translateX(0px)";
} else {
//大于一半 滑动到最大值
parentElement.dataset.type = 1;
this.deleteSlider = "transform:translateX(-" + wd + "px)";
}
console.log("touchEnd:dataset", parentElement.dataset.type);
}
}
},
restSlide(){
let listItems = document.querySelectorAll('.slider-item');
console.log(listItems);
// 复位
for (let i = 0; i < listItems.length; i++) {
listItems[i].firstChild.style = "transform:translateX(0" + "rem)";
}
},
deleteItem: function (index) {
this.$emit('deleteItem', index);
this.deleteSlider = "transform:translateX(0" + "rem)";
}
}
}
</script scoped>
<style>
.slider-item {
width: 100%;
position: relative;
user-select: none;
}
.content {
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 100;
transition: 0.6s;
}
.remove{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
width: 1rem;
height: 100%;
background: #F5F5F5;
right: 0;
top: 0;
color: #fff;
text-align: center;
font-size: .16rem;
}
.remove img{
width: .28rem;
height: .28rem;
}
.remove span{
display: block;
margin-top: .08rem;
color: #999;
font-size: .14rem;
}
</style>
然后是你要用的那个页面在这里起名为example.vue吧
<div class="mainleftslide" v-for="(item,index) in mydata">
<leftSlider :index="1" @deleteItem="deleteItem(item,index)">
<div style="height: 1.16rem;width: 100%;background: blue">
{{item.text}}
</div>
</leftSlider>
</div>
<script>
import leftSlider from 'your path'
export default {
data() {
return {
}
},
components: {
leftSlider
},
methods:{
deleteItem(item,index){
console.log(item);
console.log(index);
//do something
// eg: you delete events
}
},
}
</script>
结束语
亲测可已使用，有什么疑问的或者错误的评论区评论。谢谢。大家一起进步。
