vue-cli移动端左滑删除组件

写在前面

---

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

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

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

具体是如何适配的，请移步前端开发公共css，js笔记

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){
                console.log("index:", this.index);
                this.restSlide();
                ev = ev || event

                //tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕

                if (ev.touches.length == 1) {
                    // 记录开始位置
                    this.startX = ev.touches[0].clientX;
                    this.startY = ev.touches[0].clientY;
                }
            },
            touchMove(ev){
                ev = ev || event;
                let parentElement = ev.currentTarget.parentElement;
                //获取删除按钮的宽度，此宽度为滑块左滑的最大距离
                let wd = this.$refs.remove.offsetWidth;
                if (ev.touches.length == 1) {
                    // 滑动时距离浏览器左侧实时距离
                    this.moveY = ev.touches[0].clientY
                    this.moveX = ev.touches[0].clientX
                    if (Math.abs(this.moveY - this.startY) < 30) {
                        //起始位置减去 实时的滑动的距离，得到手指实时偏移距离
                        this.disX = this.startX - this.moveX;
                        // 如果是向右滑动或者不滑动，不改变滑块的位置
                        if (this.disX < wd / 2 || this.disX == 0) {
                            this.deleteSlider = "transform:translateX(0px)";
                            parentElement.dataset.type = 0;
                            // 大于0，表示左滑了，此时滑块开始滑动
                        } else if (this.disX > wd / 2) {
                            //具体滑动距离我取的是 手指偏移距离*5。
                            parentElement.dataset.type = 1;
                            this.deleteSlider = "transform:translateX(-" + this.disX + "px)";

                            // 最大也只能等于删除按钮宽度
                            if (this.disX*1.5 >= wd) {
                                parentElement.dataset.type = 1;
                                this.deleteSlider = "transform:translateX(-" + wd + "px)";

                            }
                        }
                    }
                }
            },
            touchEnd(ev){
                ev = ev || event;
                let parentElement = ev.currentTarget.parentElement;
                let wd = this.$refs.remove.offsetWidth;
                if (ev.changedTouches.length == 1) {

                    let endY = ev.changedTouches[0].clientY;
                    if (Math.abs(this.startY - endY) < 30) {
                        let endX = ev.changedTouches[0].clientX;
                        this.disX = this.startX - endX;
                        console.log("touchEndthis.disX:", this.disX)
                        //如果距离小于删除按钮一半,强行回到起点

                        if (this.disX < (wd /2 )) {
                            parentElement.dataset.type = 0;
                            this.deleteSlider = "transform:translateX(0px)";
                        } else {
                            //大于一半 滑动到最大值
                            parentElement.dataset.type = 1;
                            this.deleteSlider = "transform:translateX(-" + wd + "px)";
                        }
                        console.log("touchEnd:dataset", parentElement.dataset.type);
                    }
                }
            },
            restSlide(){
                let listItems = document.querySelectorAll('.slider-item');
                console.log(listItems);
                // 复位
                for (let i = 0; i < listItems.length; i++) {
                    listItems[i].firstChild.style = "transform:translateX(0" + "rem)";
                }
            },
            deleteItem: function (index) {
                this.$emit('deleteItem', index);
                this.deleteSlider = "transform:translateX(0" + "rem)";
            }
        }
    }
    </script scoped>
    <style>
    .slider-item {
        width: 100%;
        position: relative;
        user-select: none;
    }
    .content {
        position: relative;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 100;
        transition: 0.6s;
    }
    .remove{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: absolute;
      width: 1rem;
      height: 100%;
      background: #F5F5F5;
      right: 0;
      top: 0;
      color: #fff;
      text-align: center;
      font-size: .16rem;
  }
  .remove img{
      width: .28rem;
      height: .28rem;
  }
  .remove span{
      display: block;
      margin-top: .08rem;
      color: #999;
      font-size: .14rem;
  }

  </style>

然后是你要用的那个页面在这里起名为example.vue吧

   <div class="mainleftslide" v-for="(item,index) in mydata">
       <leftSlider :index="1" @deleteItem="deleteItem(item,index)">
            <div style="height: 1.16rem;width: 100%;background: blue">
                    {{item.text}}
            </div>
     </leftSlider>
     </div>
<script>
 import leftSlider from 'your path'
 export default {
   data() {
     return {
       
     }
   },
   components: {
     leftSlider 
   },
   methods:{
       deleteItem(item,index){
      console.log(item);
      console.log(index);
     //do something 
      // eg:  you delete events
    }
   },
 }
</script>

结束语

亲测可已使用，有什么疑问的或者错误的评论区评论。谢谢。大家一起进步。