How to delete pictures by long pressing in WeChat applet

This time I will show you how to delete pictures by long pressing in WeChat mini program Pictures, what are the precautions to realize long pressing to delete pictures in WeChat mini program, as follows This is a practical case, let’s take a look at it.

Explanation

Recently I am learning a mini program and encountered the problem of deleting pictures by long pressing. I hereby record and record my growth trajectory

Requirement:

Long press to delete the specified picture

Required Solved problem

1. How to express the long press event?

2. How to get the subscript of the current long press element?

3. How to delete an element?

Solution

1. Long press The event uses bindlongpress (it will not conflict with the click event bindtap);

2. Add indexindex in wxml, and then use current## in js #Target.dataset.index gets the current element index

3. Delete splice(index,1) through the splice method and delete a current element

Specific implementation

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

Add bindlongpress="deleteImage" data-index="{{index}}" in wxml to bind events and add 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
    });
   }
  })
 }

Delete part of the code

Note the difference between currentTarget and target

1. currentTarget: The bound event will be triggered by the current element and its sub-elements

2. target: The bound event child element will not trigger the event

Effect display

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to build a React family bucket environment

##How to build a webpack react development environment

The above is the detailed content of How to delete pictures by long pressing in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!