微信小程序swiper向左滑动显示删除按钮具体代码

以下是一个简单的示例代码，实现了在swiper-item中向左滑动显示删除按钮的功能：

// WXML代码
<swiper class="swiper" duration="{{duration}}" current="{{current}}" style="height: {{height}}px;">
  <swiper-item class="swiper-item" wx:for="{{list}}" wx:key="{{index}}" data-index="{{index}}" style="height: {{height}}px;">
    <view class="content" style="height: {{height}}px;">
      <!-- 此处放置swiper-item的内容 -->
    </view>
    <view class="delete" style="width: {{deleteWidth}}px; height: {{height}}px; display: none;">
      <text class="delete-text">删除</text>
    </view>
  </swiper-item>
</swiper>

// WXSS代码
.swiper {
  width: 100%;
  overflow: hidden;
}

.swiper-item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.content {
  flex: 1;
}

.delete {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: red;
  color: #fff;
}

.delete-text {
  font-size: 28rpx;
}

// JS代码
Page({
  data: {
    duration: 500,
    height: 100,
    deleteWidth: 100,
    list: [
      {text: 'item1'},
      {text: 'item2'},
      {text: 'item3'},
      {text: 'item4'},
      {text: 'item5'},
    ],
    startX: 0,
    startY: 0,
    isMoving: false,
  },

  onLoad: function () {},

  onTouchStart: function (e) {
    this.setData({
      startX: e.touches[0].clientX,
      startY: e.touches[0].clientY,
      isMoving: false,
    });
  },

  onTouchMove: function (e) {
    let {startX, startY, isMoving} = this.data;
    let currentIndex = e.currentTarget.dataset.index;
    if (isMoving) {
      return;
    }
    let moveX = e.touches[0].clientX - startX;
    let moveY = e.touches[0].clientY - startY;
    if (Math.abs(moveX) > Math.abs(moveY) && moveX < 0) {
      // 向左滑动
      let deleteWidth = this.data.deleteWidth;
      let translateX = Math.max(-deleteWidth, moveX) + 'px';
      this.setData({
        isMoving: true,
      });
      this.moveSwiperItem(currentIndex, translateX);
    }
  },

  onTouchEnd: function (e) {
    let {startX, startY, isMoving} = this.data;
    let currentIndex = e.currentTarget.dataset.index;
    if (isMoving) {
      this.setData({
        isMoving: false,
      });
      let deleteWidth = this.data.deleteWidth;
      let moveX = e.changedTouches[0].clientX - startX;
      if (moveX < -deleteWidth / 2) {
        // 显示删除按钮
        let translateX = -deleteWidth + 'px';
        this.moveSwiperItem(currentIndex, translateX, () => {
          this.showDeleteButton(currentIndex);
        });
      } else {
        // 隐藏删除按钮
        let translateX = 0;
        this.moveSwiperItem(currentIndex, translateX);
      }
    }
  },

  moveSwiperItem: function (index, translateX, callback) {
    let query = wx.createSelectorQuery().in(this);
    query.select('.swiper-item[data-index="' + index + '"]').boundingClientRect((rect) => {
      let width = rect.width;
      let height = rect.height;
      let left = index * width + parseFloat(translateX);
      let transition = 'left ' + this.data.duration + 'ms ease';
      let style = 'position: absolute; top: 0; height: ' + height + 'px; width: ' + width + 'px; left: ' + left + 'px; transition: ' + transition + ';';
      this.setData({
        ['list[' + index + '].style']: style,
      });
      if (typeof callback === 'function') {
        setTimeout(() => {
          callback();
        }, this.data.duration);
      }
    }).exec();
  },

  showDeleteButton: function (index) {
    this.setData({
      ['list[' + index + '].deleteButtonVisible']: true,
    });
  },

  hideDeleteButton: function (index) {
    this.setData({
      ['list[' + index + '].deleteButtonVisible']: false,
    });
  },

  onDelete: function (e) {
    let index = e.currentTarget.dataset.index;
    let list = this.data.list;
    list.splice(index, 1);
    this.setData({
      list: list,
    });
  },
});

需要注意的是，以上代码仅为示例代码，具体实现方式可能因项目需求而有所不同。