vue-cli移动端左滑删除组件_vue左滑删除组件-CSDN博客

本文链接：https://blog.csdn.net/ww_5211314/article/details/103491359

写在前面

这个组件是之前开发中用到的，也是参考了网上的一些文件，现在整理发出来，有助于自己学习。毕竟当时折腾了好久，好好整理一下。里边的注释自认为还是挺齐全的，还有不理解的评论。

首先说一下该组件的注意事项

1，提供左滑删除功能
2，滑动某一个时其他的不显示删除按钮
3，点击删除按钮后隐藏删除（看情况）
4，垂直（上下）滑动超过30不触发左滑功能
5，解决与上拉加载下拉刷新冲突问题
6，此组件适用于移动端
7,项目中是用的rem适配

step一,首先在components下边新建一个文件，leftSlideDelete文件夹，里边新建一个index.vue文件。

<template>
    <div>
        <div class="slider-item" data-type="0">
            <div class="content"
            @touchstart='touchStart'
            @touchmove='touchMove'
            @touchend='touchEnd'
            :style="deleteSlider">
            <!-- 插槽中放具体项目中需要内容 -->
            <slot></slot>
        </div>
        <div class="remove" ref='remove' @click.prevent="deleteItem(index)">
            <img src="../../static/img/我的 未选中@2x.png" height="48" width="48"/>
            <span>删除我</span>
        </div>
    </div>
</div>
</template>
<script type="text/ecmascript-6">
export default {
   
   
    props: {
   
   
        index: Number
    },
    data() {
   
   
        return {
   
   
                startX: 0,   //触摸位置
                endX: 0,     //结束位置
                moveX: 0,   //滑动时的位置
                disX: 0,    //移动距离
                deleteSlider: '',//滑动时的效果,使用v-bind:style="deleteSlider"
                lastIndex: "",
                startY: 0,   //触摸位置
                endY: 0,     //结束位置
                moveY: 0,   //滑动时的位置
            }

        },
        methods: {
   
   
            touchStart(ev)