Vue.js移动终端左滑删除组件实现代码

左侧滑动删除在移动端很常见。让我们一起封装这个简单的小部件。我们想要的是：

当滑块没有超过删除按钮的一半时，它会自动返回到起始位置。滑动距离超过一半，滑动到最大值(删除按钮宽度)，尽可能简化代码。效果如下：

在开始之前，我们必须明确[touchEventApi][1]。在这个小部件中，我们使用：

1.TouchEvent。触摸(表示触摸列表对象，包含当前触摸触摸平面的所有触摸对象)

2.TouchEvent.changedTouches(一个TouchList对象包含表示所有联系人的Touch对象，这些联系人的状态从上一次触摸事件到此事件发生了变化。)

话不多说，直接上代码：

模板div class=' delete ' div class=' slider ' div class=' content ' @ touch start=' touch start ' @ touch move=' touch move ' @ touch end=' touch end ' : style=' delete slider '！-把具体项目需要的内容放在槽里-槽/槽/div div class=' remove ' ref=' remove ' delete/div/div/div/template然后css，这里我用的比较少

样式范围为lang="less "范围。滑块{宽度： 100%；高度：200 px相对位置：用户选择：无；内容{位置：绝对值；左： 0；右： 0；top : 0；底部： 0；背景：绿色；z指数： 100；//设置过渡动画transition: 0.3s }。移除{绝对位置：宽度宽度：200像素高度：200 px背景：红色；右： 0；top : 0；color: # fff文本对齐：中心；font-size : 40px线高： 200像素；} }/style脚本类型=' text/ecmascript-6 '导出默认值{ data() { return { startX:0，//触摸位置endX:0，//结束位置moveX: 0，//滑动时的位置disX: 0，//移动距离删除幻灯片： ' ',//滑动时的效果，使用v-bind : style=' delete slider ' } }，methods : { TouchStart(ev){ ev=ev | | event//tounches类数组，等于一时表示此时有只有一只手指在触摸屏幕if(ev.touches.length==1){ //记录开始位置这个。StartX=ev。触摸[0].clientX} }，触摸移动(ev){ ev=ev | |事件；//获取删除按钮的宽度，此宽度为滑块左滑的最大距离让wd=这个参考文献。移除。offsetwithif(ev.touches.length==1) { //滑动时距离浏览器左侧实时距离这个。movex=ev。触摸[0].clientX //起始位置减去实时的滑动的距离，得到手指实时偏移距离这个。disx=这个。startx-这个。movexconsole.log(this.disX) //如果是向右滑动或者不滑动，不改变滑块的位置如果(这个。disx 0 | |这个。disx==0){ this。删除滑块=' transform : translatex(0px)'；//大于0,表示左滑了，此时滑块开始滑动}else if (this.disX 0) { //具体滑动距离我取的是手指偏移距离*5。这个。删除滑块=' transform : translatex(-。这个。disx * 5 ' px ')；//最大也只能等于删除按钮宽度如果(这个。disx * 5=wd){这个。删除滑块=' transform : translatex(-' wd ' px)'；} } } }，TouchEnd(ev){ ev=ev | | event；让wd=这个参考文献。移除。offsetwith如果(曾经。换个地方。长度==1){ 0让endX=ev.changedTouches[0].客户这。disx=这个。startx-ENDx；console.log(this.disX) //如果距离小于删除按钮一半，强行回到起点如果((这个。disx * 5)(wd/2)){这个。删除滑块=' transform : translatex(0px)'；}else{ //大于一半滑动到最大值这个。删除滑块=' transform : translatex(-' wd ' px)'；} } } } } } }/script到这里就全部完成了，希望对大家有帮助！也希望大家多多支持我们。