微信小程序实现左滑删除效果

要在微信小程序中实现左滑删除效果，你可以使用小程序提供的 movable-view 组件和触摸事件来实现。

            
      左滑删除              
      删除

/* 在页面的 wxss 文件中定义样式 */
.container {
  width: 100%;
}

.content {
  height: 100%;
  background-color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 20rpx;
  font-size: 28rpx;
  color: #333;
}

.delete {
  height: 100%;
  width: 200rpx;
  background-color: #f00;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: #fff;
}

// 在页面的 js 文件中编写事件处理函数
Page({
  data: {
    // 模拟的列表数据
    list: [
      { offsetX: 0 },
      { offsetX: 0 },
      { offsetX: 0 }
    ]
  },

  handleMoveChange: function(e) {
    const { index, x } = e.currentTarget.dataset;
    const { list } = this.data;

    list[index].offsetX = x;

    this.setData({
      list: list
    });
  },

  handleTouchStart: function(e) {
    // 初始化当前滑动项的初始位置
    const { index } = e.currentTarget.dataset;
    const { list } = this.data;

    list.forEach((item) => {
      if (item.offsetX !== 0) {
        item.offsetX = 0;
      }
    });

    list[index].startX = e.changedTouches[0].pageX;

    this.setData({
      list: list
    });
  },

  handleTouchEnd: function(e) {
    const { index, startX } = e.currentTarget.dataset;
    const { list } = this.data;
    const moveX = e.changedTouches[0].pageX - startX;

    if (moveX  {
          if (res.confirm) {
            list.splice(index, 1);

            this.setData({
              list: list
            });
          } else {
            this.restoreOffsetX(index);
          }
        }
      });
    } else {
      // 用户滑动未到达删除阈值，恢复滑动项的位置
      this.restoreOffsetX(index);
    }
  },

  handleTap: function(e) {
    // 处理滑动项的点击事件
    console.log('点击了滑动项');
  },

  restoreOffsetX: function(index) {
    const { list } = this.data;

    list[index].offsetX = 0;

    this.setData({
      list: list
    });
  }
});

在上述代码示例中，我们使用 movable-view 组件来创建可滑动的视图，使用 bindchange 事件监听视图的位置变化，使用 bindtouchstart 和 bindtouchend 事件监听触摸开始和结束的事件，使用 bindtap 事件监听滑动项的点击事件。

通过修改滑动项的 offsetX 属性，可以控制滑动项的位置。在 handleTouchStart 方法中，我们记录滑动项的初始位置，并在 handleTouchEnd 方法中，根据用户滑动的距离来判断是否执行删除操作或回复滑动项的位置。

当用户滑动到达一定的阈值时，弹出确认删除的对话框，用户确认后删除对应项的数据，并更新列表的 list 数据。当用户滑动未达到删除阈值时，我们通过 restoreOffsetX 方法恢复滑动项的位置。