vue仿ios列表左划删除

let endX = ev.changedTouches[0].clientX;

this.disX = this.startX - endX;
console.log(this.disX)
//如果距离小于删除按钮一半,强行回到起点

if ((this.disX*5) < (wd/2)) {

this.deleteSlider = "transform:translateX(0px)";
}else{
//大于一半 滑动到最大值
this.deleteSlider = "transform:translateX(-"+wd+ "px)";
}
}
}
}
}
</script>

<style scoped lang="less">
.slider{
width: 100%;
height:100px;
position: relative;
user-select: none;
.content{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background:green;
z-index: 100;
// 设置过渡动画
transition: 0.3s;

}
.remove{
position: absolute;
width:200px;
height:100px;
background:red;
right: 0;
top: 0;
color:#fff;
text-align: center;
font-size: 40px;
line-height: 100px;
}
}

</style>

 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持软件开发网。