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

創(chuàng)新互聯(lián)建站是一家專注于做網(wǎng)站、網(wǎng)站建設與策劃設計,望花網(wǎng)站建設哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設10多年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:望花等地區(qū)。望花做網(wǎng)站價格咨詢:028-86922220

解決辦法

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

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

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

具體實現(xiàn)

<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的區(qū)別

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

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

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

本文標題：怎么在微信小程序中實現(xiàn)一個長按刪除圖片功能
轉載源于：http://www.rwnh.cn/article32/ggddsc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、網(wǎng)站營銷、微信公眾號、靜態(tài)網(wǎng)站、ChatGPT、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)