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

准备

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

vue init webpack test

组件

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

    

        

            

                
                
                
                
                
                
            
            

                删除
            
        
    

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

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) {// 大于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');
        }   
    }
}

我们在代码中主要用到三个移动端触控事件：

touchstart
: 手指放到屏幕上时触发

touchmove
: 手指在屏幕上滑动式触发

touchend
：手指离开屏幕时触发
每个触控事件被触发后，会生成一个event对象，event对象里额外包括以下三个触控列表

touches
: 当前屏幕上所有手指的列表

targetTouches
: 当前dom元素上手指的列表，尽量使用这个代替touches

changedTouches
: 涉及当前事件的手指的列表，尽量使用这个代替touches
这些列表里的每次触控由touch对象组成，touch对象里包含着触控信息，主要属性如下：

clientX / clientY
: 触摸点相对浏览器窗口的位置

pageX / pageY
: 触摸点相对于页面的位置

screenX / screenY
: 触摸点相对于屏幕的位置
在上述代码中还可以看到，当滑块没有超过删除按钮的一半时自动回到起点位置。点击删除后调用deleteLine删除当前行。

组件调用

我们在HelloWorld.vue中建立模板，引入组件deleteSlider，代码如下：

  
    
    
      

      
{{list.title}}
      
{{list.price}}
     
  



import deleteSlider from '@/components/deleteTemplate.vue' 

export default {
  components: {
    deleteSlider
  },
  data () {
    return {
      dataList: [
        {
          id: 1,
          img: 'static/a1.jpg',
          title: '法国专柜2019夏季新款修身显瘦气质包臀短裙镂空蕾丝性感连衣裙子',
          price: '399.00'
        },
        {
          id: 2,
          img: 'static/a2.jpg',
          title: 'VERAMOON 亮片印花短袖连衣裙女夏甜美露背性感泡泡袖修身短裙',
          price: '689.00'
        },
        {
          id: 3,
          img: 'static/a3.jpg',
          title: 'famous 仙气木耳边紫色小碎花短裙a字雪纺连衣裙女',
          price: '199.00'
        },
        {
          id: 4,
          img: 'static/a4.jpg',
          title: '灰灰定制 2019春夏新款小香风粗花呢连衣裙女法式名媛复古短裙M家',
          price: '298.00'
        }
      ]
    }
  },
  methods:{
      deleteLine (index, id){
        console.log(id);
        
        this.dataList.splice(index, 1)
      }      
   }
}

注意实际应用中数据源可用异步加载，在删除的时候或许要异步请求后端来真正完成删除操作。