欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)長按刪除圖片的示例

 更新時間：2018年05月18日 09:07:08   作者：kerin  
本篇文章主要介紹了微信小程序?qū)崿F(xiàn)長按刪除圖片的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

說明

最近在學(xué)小程序,遇到長按圖片刪除的問題,特此記錄,記錄自己的成長軌跡

需求:

長按刪除指定圖片

需要解決的問題

  1. 長按事件如何表示出來?
  2. 如何獲取當(dāng)前長按元素的下標?
  3. 如何刪除元素?

解決辦法

  1. 長按事件是用bindlongpress(不會跟點擊事件bindtap沖突);
  2. 在wxml中添加索引index,然后在js中用currentTarget.dataset.index獲取當(dāng)前元素下標
  3. 通過splice方法刪除splice(index,1),刪除一個當(dāng)前元素

具體實現(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;//獲取當(dāng)前長按圖片下標
  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:綁定的事件當(dāng)前元素及其子元素都會觸發(fā)

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

效果展示

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論