使用Vue实现移动端左滑删除效果附源码

左滑删除在移动端是很常见的一种操作，常见于删除购物车中的商品，删除收藏夹中文章等等场景。我们只需要手指按住要删除的对象，然后轻轻向左滑动，便会出现删除按钮，然后点击删除按钮即可删除对象。

 点击下载源码

今天我给大家介绍的移动端左滑删除效果是基于Vue2实现的，结合以电商平台的删除购物车商品为例，来看实现步骤。

准备

安装vue项目过程已忽略，如果不懂vue的同学可以上官网看下：https://cn.vuejs.org/v2/guide/installation.html#NPM

我们使用安装一个webpack模板：

vue init webpack test

组件

我们创建一个左滑删除组件，在src/components目录下创建文件：deleteTemplate.vue，然后编写模板代码：

<template>  <div class="delete">    <div class="slider">      <div class="content" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' :style="deleteSlider">        <!-- 插槽中放具体项目中需要内容 -->        <slot name="img"></slot>        <slot name="title"></slot>        <slot name="price"></slot>        <!-- 默认插槽 -->        <slot></slot>      </div>      <div class="remove" ref='remove' @click="deleteLine">        删除      </div>    </div>  </div></template>

我们这个模板是一个要左滑删除的列表项，绑定了手势滑动触控动作响应，在其中加入了图片、商品名称和价格等内容，以及一个删除按钮。

接下来，我们看组件中的js部分：

<script>export default {  props: ['index'],  data() {    return {      startX: 0,  //触摸位置      endX: 0,   //结束位置      moveX: 0,  //滑动时的位置      disX: 0,  //移动距离      deleteSlider: '',//滑动时的效果,使用v-bind:style="deleteSlider"    }  },  methods:{    touchStart(ev){      ev = ev || event      //tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕      if(ev.touches.length == 1){        // 记录开始位置        this.startX = ev.touches[0].clientX;      }    },    touchMove(ev){      ev = ev || event;      //获取删除按钮的宽度，此宽度为滑块左滑的最大距离      let wd = this.$refs.remove.offsetWidth;      if(ev.touches.length == 1) {        // 滑动时距离浏览器左侧实时距离        this.moveX = ev.touches[0].clientX        //起始位置减去 实时的滑动的距离，得到手指实时偏移距离        this.disX = this.startX - this.moveX;        //console.log(this.disX)        // 如果是向右滑动或者不滑动，不改变滑块的位置        if (this.disX < 0 || this.disX == 0) {          this.deleteSlider = "transform:translateX(0px)";        } else if (this.disX > 0) {// 大于0，表示左滑了，此时滑块开始滑动           //具体滑动距离我取的是 手指偏移距离*5。          this.deleteSlider = "transform:translateX(-" + this.disX*5 + "px)";          // 最大也只能等于删除按钮宽度           if (this.disX*5 >= wd) {            this.deleteSlider = "transform:translateX(-" +wd+ "px)";          }        }      }    },    touchEnd(ev){      ev = ev || event;      let wd = this.$refs.remove.offsetWidth;      if (ev.changedTouches.length == 1) {        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)";        }      }    },    deleteLine (){      this.deleteSlider = "transform:translateX(0px)";      this.$emit('deleteLine');    }    }}</script>