基于vue2实现左滑删除功能

左滑删除，很多UI框架里有，比如Mint-UI， Muse-UI等，一开始我们就是用的这两个，但是我们需求是要：左滑的时候出现img然后来实现点击删除，如下：

因为用UI框架，还得改底层代码= =所以，我们小组就直接写了一个- -，心累……此组件多地方使用，所以建议还是放到common下。

<template>
 <div class="left-delete">
 <div class="move"
 @touchstart="_touchStart"
 @touchmove="_touchMove"
 @touchend="_touchEnd"
 :style="txtStyle">
 <slot></slot>
 </div>
 <div class="deleteIcon" :style="zIndex" @click.prevent="deleteItem(index)"></div>
 </div>
</template>

<script>
 export default {
 props: {
 index: Number
 },
 data() {
 return {
 startX: 0, //触摸位置
 moveX: 0, //滑动时的位置
 disX: 0, //移动距离
 txtStyle: '',
 delWidth: 200,
 top: '',
 zIndex: 'z-index:-1',
 }
 },
 methods: {
 _touchStart: function(ev) {
 ev = ev || event;
 if(ev.touches.length == 1){
 // 手指按下的时候记录按下的位置
 this.startX = ev.touches[0].clientX;
 console.log(this.startX)
 }
 },
 _touchMove: function(ev) {
 ev = ev || event;
 if(ev.touches.length == 1) {
 // 滑动过程中的实时位置
 this.moveX = ev.touches[0].clientX
 // 滑动过程中实时计算滑动距离
 this.disX = this.startX - this.moveX;
 // console.log('disX==>',this.disX)
 // 如果是向右滑动或者只是点击，不改变滑动位置
 if(this.disX < 0 || this.disX == 0) {
 // console.log('没有移动');
 this.txtStyle = "transform:translateX(0rem)";
 }else if (this.disX > 0) {
如果是向左滑动，则实时给这个根元素一个向左的偏移-left，当偏移量到达固定值delWidth时，固定元素的偏移量为 delWidth
 this.txtStyle = "transform:translateX(-" + this.disX/100 + "rem)";
 if (this.disX >= this.delWidth/100) {
 this.txtStyle = "transform:translateX(-" + this.delWidth/100 + "rem)";
 this.zIndex = "z-index:" + 10 + "rem";
 }
 }
 }
 },
 _touchEnd: function(ev) {
 if (event.changedTouches.length == 1) {
 this.startX = 0;
 this.zIndex = "z-index:" + -1 + "rem";
 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>

然后就完成了。