微信小程序長按刪除圖片的實現(xiàn)
2018-05-21|HiShop
導(dǎo)讀:小程序?qū)崿F(xiàn)長按刪除指定圖片需要如何處理實現(xiàn),下面為大家介紹實現(xiàn)長按刪除指定圖片的操作流程。...
小程序?qū)崿F(xiàn)長按刪除指定圖片需要如何處理實現(xiàn),下面為大家介紹實現(xiàn)長按刪除指定圖片的操作流程。
小程序?qū)崿F(xiàn)長按刪除指定圖片需要解決的問題
長按事件如何表示出來?如何獲取當(dāng)前長按元素的下標(biāo)?
如何刪除元素?
小程序?qū)崿F(xiàn)長按刪除指定圖片解決辦法
長按事件是用bindlongpress(不會跟點擊事件bindtap沖突);
在wxml中添加索引index,然后在js中用currentTarget.dataset.index獲取當(dāng)前元素下標(biāo)
通過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)前長按圖片下標(biāo) 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ū)別
currentTarget:綁定的事件當(dāng)前元素及其子元素都會觸發(fā)target: 綁定的事件 子元素不會被觸發(fā)事件