vue h5 滑动删除

要实现 Vue H5 滑动删除，可以使用与上面类似的方法，但是需要在 Vue 中添加一些逻辑和事件处理，以下是一个简单的实现步骤：

1. 在 Vue 的组件中使用 `v-for` 指令渲染列表，并且为每个列表项绑定 `touchstart`、`touchmove` 和 `touchend` 事件监听器。

<template>
  <div class="list">
    <div v-for="(item, index) in items" :key="index"
      class="item"
      @touchstart="handleTouchStart(index, $event)"
      @touchmove="handleTouchMove(index, $event)"
      @touchend="handleTouchEnd(index)">
      <div class="left">Delete</div>
      <div class="content">{{ item }}</div>
    </div>
  </div>
</template>

2. 在组件的 `data` 选项中添加一个 `swipeIndex` 属性，用于标记当前正在滑动的列表项的索引。

export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
      swipeIndex: -1
    }
  },
  methods: {
    handleTouchStart(index, event) {
      // ...
    },
    handleTouchMove(index, event) {
      // ...
    },
    handleTouchEnd(index) {
      // ...
    }
  }
}

3. 在 `handleTouchStart` 方法中记录滑动的起始位置，并将当前列表项的 `swipeIndex` 属性设置为其索引。

handleTouchStart(index, event) {
  this.startX = event.touches[0].pageX;
  this.startY = event.touches[0].pageY;
  this.swipeIndex = index;
}

4. 在 `handleTouchMove` 方法中计算当前列表项的滑动距离，并根据滑动距离调整左滑区域和内容区域的位置。同时，如果用户向右滑动距离超过左滑区域的宽度时，将当前列表项标记为“滑动”。

handleTouchMove(index, event) {
  if (index !== this.swipeIndex) {
    return
  }

  var deltaX = event.touches[0].pageX - this.startX;
  var deltaY = event.touches[0].pageY - this.startY;
  if (Math.abs(deltaX) < Math.abs(deltaY)) {
    return
  }

  event.preventDefault();

  var left = Math.max(-this.leftWidth, Math.min(deltaX, 0));
  var content = Math.max(0, Math.min(deltaX + this.leftWidth, this.contentWidth));

  this.items[index].left = left;
  this.items[index].content = content;

  if (deltaX < -this.leftWidth) {
    this.items[index].swipe = true;
  }
}

5. 在 `handleTouchEnd` 方法中根据当前列表项的标记判断是否应该删除该项，如果是，则将其从数组中删除，并将 `swipeIndex` 属性重置为 `-1`。

handleTouchEnd(index) {
  if (index !== this.swipeIndex) {
    return
  }

  if (this.items[index].swipe) {
    this.items.splice(index, 1);
  } else {
    this.items[index].left = 0;
    this.items[index].content = 0;
  }

  this.swipeIndex = -1;
}

6. 最后，在 CSS 中设置左滑区域和内容区域的样式，并在组件的 `mounted` 钩子函数中计算它们的宽度。

.item {
  position: relative;
  overflow: hidden;
  height: 50px;
  background-color: #eee;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 50px;
  background-color: #ccc;
  transform: translateX(-100px);
  transition: transform 0.3s ease-out;
}

.content {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 50px;
  padding: 10px;
  background-color: #fff;
  transform: translateX(0);
  transition: transform 0.3s ease-out;
}

.item.swipe .left {
  transform: translateX(0);
}

.item.swipe .content {
  transform: translateX(100px);
}

mounted() {
  var items = this.$el.querySelectorAll('.item')
  for (var i = 0; i < items.length; i++) {
    this.items[i] = {
      left: 0,
      content: 0,
      swipe: false
    }
  }
  this.leftWidth = items[0].querySelector('.left').offsetWidth
  this.contentWidth = items[0].querySelector('.content').offsetWidth
  for (var i = 0; i < items.length; i++) {
    items[i].querySelector('.left').style.width = this.leftWidth + 'px'
    items[i].querySelector('.content').style.width = this.contentWidth + 'px'
  }
}

这样，就可以在 Vue H5 中实现滑动删除功能了。