本文实例为大家分享了某视频剪辑软件仿ios列表左划删除的具体代码，供大家参考，具体内容如下

效果：

代码：

模板div class=' delete ' div class=' slider ' div class=' content ' @ touch start=' touch start ' @ touch move=' touch move ' @ touch end=' touch end ' : style=' delete slider '！-插槽中放具体项目中需要内容-slot/slot/div class=' remove ' ref=' remove '删除//div/div/模板脚本类型='text/ecmascript-6 '导出默认{ data() { return { startX:0，//触摸位置endX:0，//结束位置moveX: 0，//滑动时的位置disX: 0，//移动距离deleteSlider: ' '，//滑动时的效果，使用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)'；} } } } }/脚本样式范围为lang="less ".滑块{宽度： 100%；高度：100 px相对位置：用户选择：无；内容{位置：绝对值；左： 0；右： 0；top : 0；底部： 0；背景：绿色；z指数： 100；//设置过渡动画transition: 0.3s }。移除{绝对位置：宽度宽度：200像素高度：100 px背景：红色；右： 0；top : 0；color: # fff文本对齐：中心；font-size : 40px线高： 100像素；} }/样式以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。