基于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>

然后就完成了。。。如果有更好的，希望您能不吝啬来教我#99