微信小程序实现长按删除图片的示例

下面是完整的攻略，包括示例说明：

实现长按删除图片功能的原理

在微信小程序中，我们可以通过使用 longpress 事件来捕获用户长按某个图片元素的动作，并通过 wx.showActionSheet 函数弹出一个菜单，提示用户是否要删除该图片。具体代码如下：

<view>
  <image src="{{imageSrc}}" longpress="showDeleteMenu"></image>
</view>

Page({
  data: {
    imageSrc: 'path/to/image.jpg'
  },
  showDeleteMenu: function(e) {
    var that = this;
    wx.showActionSheet({
      itemList: ['删除'],
      success: function(res) {
        if (res.tapIndex == 0) {  // 用户点击了删除按钮
          that.setData({
            imageSrc: ''
          });
        }
      }
    });
  }
});

以上代码中，我们首先给图片元素绑定了一个 longpress 事件处理函数 showDeleteMenu，然后在该函数中调用 wx.showActionSheet 函数弹出一个菜单，让用户选择是否要删除该图片。如果用户点击了删除按钮，我们就只需要将图片元素的 src 属性置空即可。

示例一：删除当前展示的图片

下面是一个示例，演示如何删除当前展示的图片：

<view>
  <image src="{{images[imageIndex]}}" longpress="showDeleteMenu"></image>
</view>

Page({
  data: {
    images: [
      'path/to/image1.jpg',
      'path/to/image2.jpg',
      'path/to/image3.jpg'
    ],
    imageIndex: 0  // 当前展示的图片在 images 数组中的索引
  },
  showDeleteMenu: function(e) {
    var that = this;
    wx.showActionSheet({
      itemList: ['删除'],
      success: function(res) {
        if (res.tapIndex == 0) {  // 用户点击了删除按钮
          var images = that.data.images;
          images.splice(that.data.imageIndex, 1);  // 从数组中删除当前展示的图片
          that.setData({
            images: images,
            imageIndex: (that.data.imageIndex + 1) % images.length  // 更新当前展示的图片索引
          });
        }
      }
    });
  }
});

以上代码中，我们首先定义了一个 images 数组，用来存放多张图片的地址，然后在页面中使用 <image> 元素展示当前图片。在 showDeleteMenu 函数中，我们通过 Array.prototype.splice 方法从 images 数组中移除当前展示的图片，然后通过更新 imageIndex 变量，显示下一张图片。

示例二：删除特定的图片

下面是一个示例，演示如何删除特定的图片：

<view>
  <image wx:for="{{images}}" wx:for-index="index" wx:key="{{index}}" src="{{item}}" longpress="showDeleteMenu"></image>
</view>

Page({
  data: {
    images: [
      'path/to/image1.jpg',
      'path/to/image2.jpg',
      'path/to/image3.jpg'
    ]
  },
  showDeleteMenu: function(e) {
    var that = this;
    var index = e.currentTarget.dataset.index;
    wx.showActionSheet({
      itemList: ['删除'],
      success: function(res) {
        if (res.tapIndex == 0) {  // 用户点击了删除按钮
          var images = that.data.images;
          images.splice(index, 1);  // 从数组中删除特定的图片
          that.setData({
            images: images
          });
        }
      }
    });
  }
});

以上代码中，我们使用一个 wx:for 循环展示所有的图片，并使用 wx:for-index 和 wx:key 属性指定循环索引和关键字。在 showDeleteMenu 函数中，我们通过 e.currentTarget.dataset.index 获取用户点击了哪张图片，然后通过 Array.prototype.splice 方法从 images 数组中移除该图片。