uni-app 左滑删除插件需求

用过了，数据无法渲染且左滑第二条的时候，第一条无法复位

在uni-app中实现左滑删除功能，通常需要结合触摸事件（touchstart、touchmove、touchend）和CSS样式来动态显示删除按钮。以下是一个简单的代码示例，展示了如何在uni-app中实现这一功能。

1. 页面结构（template）

<template>
  <view class="container">
    <view
      v-for="(item, index) in list"
      :key="index"
      class="list-item"
      @touchstart="touchstart(index, $event)"
      @touchmove="touchmove(index, $event)"
      @touchend="touchend(index, $event)"
      :style="{ transform: `translateX(${translateX[index]}px)` }"
    >
      <text>{{ item.name }}</text>
      <view v-if="isSwiping[index]" class="delete-btn" @click="deleteItem(index)">删除</view>
    </view>
  </view>
</template>

2. 数据与方法（script）

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        // 更多项目...
      ],
      startX: [], // 存储触摸开始时的X坐标
      isSwiping: [], // 标记是否正在滑动
      translateX: [], // 存储每个项目的横向位移
    };
  },
  methods: {
    touchstart(index, event) {
      this.startX[index] = event.touches[0].clientX;
      this.isSwiping[index] = false;
      this.translateX[index] = 0;
    },
    touchmove(index, event) {
      const moveX = event.touches[0].clientX;
      const diffX = moveX - this.startX[index];
      if (diffX < -50) { // 当滑动超过50px时显示删除按钮
        this.translateX[index] = diffX;
        this.isSwiping[index] = true;
      }
    },
    touchend(index, event) {
      if (this.isSwiping[index] && this.translateX[index] < -50) {
        // 滑动超过一定距离则删除项
        this.deleteItem(index);
      } else {
        // 否则复位
        this.translateX[index] = 0;
        this.isSwiping[index] = false;
      }
    },
    deleteItem(index) {
      this.list.splice(index, 1);
      this.startX.splice(index, 1);
      this.isSwiping.splice(index, 1);
      this.translateX.splice(index, 1);
    },
  },
};
</script>

3. 样式（style）

<style scoped>
.container {
  display: flex;
  flex-direction: column;
}
.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  background-color: #fff;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.delete-btn {
  position: absolute;
  right: 0;
  background-color: red;
  color: white;
  padding: 5px 10px;
  transform: translateX(100%);
  transition: transform 0.3s;
}
.list-item[style*="translateX(-"] .delete-btn {
  transform: translateX(0);
}
</style>

上述代码展示了一个基本的左滑删除功能实现，你可以根据具体需求进行扩展和优化。