uni-app+Vue2+vue.js+css3实现滑动删除效果

在uni-app中使用Vue2实现一个简单的滑动删除效果，可以通过监听触摸事件来实现。以下是一个简单的示例：

<template>
  <view class="container">
    <view
      class="item"
      v-for="(item, index) in list"
      :key="index"
      @touchstart="start"
      @touchmove="move"
      @touchend="end"
      :data-index="index"
      :class="{ 'item-active': activeIndex === index }"
    >
      {{ item }}
      <view class="delete" v-if="activeIndex === index">删除</view>
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3'],
      startX: 0,
      activeIndex: -1,
    };
  },
  methods: {
    start(event) {
      this.startX = event.touches[0].clientX;
    },
    move(event) {
      const index = event.currentTarget.dataset.index;
      const moveX = event.touches[0].clientX;
      const distance = moveX - this.startX;
      if (distance > 0) {
        this.activeIndex = index;
      }
    },
    end() {
      this.activeIndex = -1;
    },
  },
};
</script>
 
<style>
.container {
  display: flex;
  flex-direction: column;
}
 
.item {
  position: relative;
  height: 50px;
  line-height: 50px;
  width: 100%;
  border: 1px solid #ccc;
  overflow: hidden;
  transition: transform 0.3s;
}
 
.item-active {
  transform: translateX(-100%);
}
 
.delete {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 100px;
  background-color: red;
  text-align: center;
  line-height: 50px;
  color: #fff;
}
</style>

在这个例子中，每个列表项都有触摸事件监听，当用户滑动时，记录开始滑动的位置，并在移动时计算滑动的距离。如果是向右滑动，那么设置当前滑动的项的索引，并通过添加item-active类来显示删除按钮。当滑动结束或触发touchend事件时，重置activeIndex。这里使用了transform进行滑动效果的实现，并通过transition属性添加了滑动的动画效果。