怎么在微信小程序中實現一個長按刪除圖片功能

怎么在微信小程序中實現一個長按刪除圖片功能？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

解決辦法

1. 長按事件是用bindlongpress(不會跟點擊事件bindtap沖突);

2. 在wxml中添加索引index,然后在js中用currentTarget.dataset.index獲取當前元素下標

3. 通過splice方法刪除splice(index,1),刪除一個當前元素

具體實現

<view class="uploader__files">
   <block wx:for="{{images}}" wx:key="{{item.id}}" >
      <view class="uploader__file" bindlongpress="deleteImage" data-index="{{index}}">
        <image mode="aspectFill" class="uploader__img" src="{{item.path}}" />
      </view>
   </block>
</view>

在wxml中添加 bindlongpress="deleteImage" data-index="{{index}}" 來綁定事件并添加索引index

deleteImage: function (e) {
  var that = this;
  var images = that.data.images;
  var index = e.currentTarget.dataset.index;//獲取當前長按圖片下標
  wx.showModal({
   title: '提示',
   content: '確定要刪除此圖片嗎？',
   success: function (res) {
    if (res.confirm) {
     console.log('點擊確定了');
     images.splice(index, 1);
    } else if (res.cancel) {
      console.log('點擊取消了');
      return false;    
     }
    that.setData({
     images
    });
   }
  })
 }

刪除部分的代碼

注意currentTarget與target的區別

1. currentTarget:綁定的事件當前元素及其子元素都會觸發

2. target: 綁定的事件 子元素不會被觸發事件

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。