vue 高级技巧：左滑删除带给你不同的体验

前言

在移动设备上，左滑删除已经成为了一种非常普遍的操作方式。vue 框架不仅提供了方便快捷的组件化开发方式，也能够轻松实现左滑删除功能，为用户提供更加友好和自然的交互体验。本文将带大家一步步了解如何使用 vue 实现左滑删除功能。

---

实现思路

1. 设置向左滑动，touchstart() 手指触摸事件；
2. 滑动开始，记录初始位置，左滑大于 30 距离删除按钮出现，滑动时判断当前是否有滑块处于滑动状态，滑动结束，记录结束位置，touchend() 当手指从屏幕上离开的时候触发；
3. 点击删除按钮，删除数据，复位滑动状态。

---

实现效果

---

完整源码

<template>
  <div>
    <div class="biggestBox">
      <ul>
        <!-- data-type=0 隐藏删除按钮 data-type=1 显示删除按钮 -->
        <li class="li_vessel" v-for="(item,index) in lists " data-type="0" :key="index">
          <!-- "touchstart" 当手指触摸屏幕时候触发  "touchend"  当手指从屏幕上离开的时候触发  "capture" 用于事件捕获-->
          <div @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="oneself">
            <div class="contant">
              <img class="image" :src="item.imgUrl" alt />
              <div class="rightBox">
                <div>{{item.title}}</div>
                <div>{{item.subheading}}</div>
                <div>{{item.faddish}}</div>
                <div>{{item.price}}</div>
              </div>
            </div>
          </div>
          <div class="removeBtn" @click="remove" :data-index="index">删除</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        lists: [{
            title: "标题1",
            imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
            subheading: "副标题1",
            faddish: "爆款",
            price: "￥12.00",
          },
          {
            title: "标题2",
            imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
            subheading: "副标题2",
            faddish: "爆款",
            price: "￥58.00",
          },
          {
            title: "标题3",
            imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
            subheading: "副标题3",
            faddish: "爆款",
            price: "￥99.99",
          },
          {
            title: "标题4",
            imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
            subheading: "副标题4",
            faddish: "爆款",
            price: "￥88.32",
          },
          {
            title: "标题5",
            imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
            subheading: "副标题5",
            faddish: "爆款",
            price: "￥9999.99",
          },
        ],
        startX: 0, //滑动开始
        endX: 0, //滑动结束
      };
    },
    methods: {
      // 向左滑动出现删除按钮时，点击商品信息区域取消删除
      oneself() {
        if (this.checkSlide()) {
          this.restSlide();
        } else {
          // 点击商品信息弹出弹框
          console.log("点击当前商品触发事件...");
        }
      },
      //滑动开始
      touchStart(e) {
        // 记录初始位置
        this.startX = e.touches[0].clientX;
      },
      //滑动结束
      touchEnd(e) {
        // 当前滑动的父级元素
        let parentElement = e.currentTarget.parentElement;
        // 记录结束位置
        this.endX = e.changedTouches[0].clientX;
        // 左滑大于30距离删除出现
        if (parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
          this.restSlide();
          parentElement.dataset.type = 1;
        }
        // 右滑
        if (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
          this.restSlide();
          parentElement.dataset.type = 0;
        }
        this.startX = 0;
        this.endX = 0;
      },
      //判断当前是否有滑块处于滑动状态
      checkSlide() {
        let listItems = document.querySelectorAll(".li_vessel");
        for (let i = 0; i < listItems.length; i++) {
          if (listItems[i].dataset.type == 1) {
            return true;
          }
        }
        return false;
      },
      //复位滑动状态
      restSlide() {
        let listItems = document.querySelectorAll(".li_vessel");
        // 复位
        for (let i = 0; i < listItems.length; i++) {
          listItems[i].dataset.type = 0;
        }
      },
      //删除数据信息
      remove(e) {
        // 当前索引值
        let index = e.currentTarget.dataset.index;
        // 复位
        this.restSlide();
        // 删除数组lists中一个数据
        this.lists.splice(index, 1);
      },
    },
  };
</script>

<style scoped>
  .biggestBox {
    overflow: hidden;
    /*超出部分隐藏*/
  }

  ul {
    /* 消除 ul 默认样式 */
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .li_vessel {
    /* 全部样式 0.2秒 缓动*/
    transition: all 0.2s;
  }

  /* =0隐藏 */
  .li_vessel[data-type="0"] {
    transform: translate3d(0, 0, 0);
  }

  /* =1显示 */
  .li_vessel[data-type="1"] {
    /* -64px 设置的越大可以左滑的距离越远，最好与下面删除按钮的宽度以及定位的距离设置一样的值*/
    transform: translate3d(-64px, 0, 0);
  }

  /* 删除按钮 */
  .li_vessel .removeBtn {
    width: 64px;
    height: 103px;
    background: #ff4949;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 22px;
    position: absolute;
    top: 0px;
    right: -64px;
    line-height: 103px;
    text-align: center;
    border-radius: 2px;
  }

  /* 左边的图片样式 */
  .contant {
    overflow: hidden;
    /*消除图片带来的浮动*/
    padding: 10px;
    background: #ffffff;
  }

  .contant .image {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    float: left;
  }

  /* 右边的文字信息样式 */
  .rightBox {
    overflow: hidden;
    padding-left: 8px;
  }

  .rightBox div:first-child {
    font-weight: bold;
  }

  .rightBox div:nth-child(2) {
    margin-top: 4px;
    font-size: 14px;
  }

  .rightBox div:nth-child(3) {
    width: 36px;
    background: rgb(219, 91, 113);
    color: white;
    font-size: 12px;
    text-align: center;
    padding: 2px 4px 2px 4px;
    margin-left: auto;
  }

  .rightBox div:last-child {
    color: red;
    font-size: 14px;
    font-weight: bold;
  }
</style>

---

代码解读

数据部分：

在 data 中定义了一个名为 lists 的数组，包含多个商品对象，每个商品对象有标题、图片 URL、副标题、爆款标识和价格等属性。

模板部分：

使用 Vue 的模板语法创建商品列表。每个商品项被包裹在一个 li 元素中，包括商品图片、标题等信息以及一个删除按钮。商品项的滑动状态通过 data-type 属性来控制，0 表示未滑动，1 表示已滑动。

方法部分：

oneself() 检查滑动状态，如果未滑动则触发商品点击事件，否则复位滑动状态。
touchStart(e) 和 touchEnd(e) 记录滑动的起始和结束位置，根据滑动距离判断是否应该显示删除按钮或隐藏删除按钮。
checkSlide() 检查是否有商品项处于滑动状态，遍历所有项的 data-type 属性，有任何一个为 1 则返回 true，否则返回 false。
restSlide() 复位所有商品项的滑动状态，将所有项的 data-type 属性设置为 0，隐藏删除按钮。
remove(e) 处理删除按钮点击事件，找到要删除的商品索引，从 lists 数组中删除对应项，然后调用 restSlide() 方法复位滑动状态。

样式部分：

使用了一些 CSS 来定义商品列表和滑动删除效果，包括商品项的排列、删除按钮的样式和定位等。

总结

总体来说，这段代码的核心思路是通过记录滑动位置，控制 data-type 属性，实现左滑出现删除按钮的交互效果，并提供复位和删除功能。同时，点击商品项可以触发点击事件，但如果处于滑动状态则会取消滑动。