基于vue2实现左滑删除功能

console.log(event.changedTouches[0].clientX)
// 手指移动结束后的水平位置
let endX = event.changedTouches[0].clientX;
// 触摸开始与结束,手指移动的距离
this.disX = this.startX - endX;
//如果距离小于删除按钮的1/2，不显示删除按钮
}
},
deleteItem: function(index) {
this.$emit('deleteItem', index);
}
}
}
</script>

<style>
.left-delete{
width:100%;
height:100%;
position:relative;
z-index:2;
}
.move{
position: relative;
}
.deleteIcon{
width: 2rem;
height:100%;
position: absolute;
right:0;
top:0;
background:url(./../../assets/main/4.png) no-repeat;
background-size: contain;
}
</style>

然后哪个页面需要，哪个页面引入就好。比如myCollect页面需要，那么如下：

<template>
  <section class="myCollect">
 <section>
      <div v-for="(item,index) in collectionList">
        <left-slider :index="index" @deleteItem="deleteItem">
          <Financial :item="item" :index="index"></Financial>
        </left-slider>
      </div>
    </section>
  </section>
</template>
<script>
  import api from './../../fetch/api';
  import { mapGetters } from 'vuex';
  import Financial from './../common/financial.vue';
  import LeftSlider from './../common/leftSlider.vue';
  export default {
    name: 'MyCollect',
    props: {
      item: Object,
      index: Number
    },
    components: {
      Financial,
      LeftSlider
    },
    data() {
      return {
      }
    },
    created() {
      this.getCollectionList();
    },
    methods: {
    },
    computed: {
        ...mapGetters([
          'getContextPathSrc',
          'sessionId',
          'token'
        ]),
  },
  methods: {
    // 删除
    deleteItem: function(index) {
      api.commonApi('后台接口，请求数据')//此处api是封装的axios，详情看文章：vue2+vuex+axios即可
          .then(res => {
        console.debug("REQ_ADD_STORE.res.data.result -> " + res.data.result);
      this.collectionList.splice(index, 1);
    });
    }
  },
  mounted() {
  }
  }
</script>

然后就完成了。