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

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

Effect display

How to build a React family bucket 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!