Heim > Web-Frontend > js-Tutorial > Hauptteil

So löschen Sie Bilder durch langes Drücken im WeChat-Applet

php中世界最好的语言
Freigeben: 2018-05-28 15:44:13
Original
5028 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie Bilder durch langes Drücken im WeChat-Miniprogramm löschen. Was sind die Vorsichtsmaßnahmen für das lange Drücken, um Bilder im WeChat-Miniprogramm zu löschen? wie folgt: Dies ist ein praktischer Fall, schauen wir ihn uns an.

Erklärung

Ich lerne kürzlich Miniprogramme und bin auf das Problem gestoßen, Bilder durch langes Drücken zu löschen. Hiermit zeichne ich meinen Wachstumsverlauf auf

Erforderlich:

Lang drücken, um das angegebene Bild zu löschen

Erforderlich gelöstes Problem

  1. Wie drücke ich das lange Drücken aus?

  2. Wie erhalte ich den Index? des aktuellen Long-Press-Elements?

  3. Wie lösche ich ein Element?

Lösung

  1. Langes Drücken Das Ereignis verwendet bindlongpress (es entsteht kein Konflikt mit dem Klickereignis bindtap);

  2. Index in wxml hinzufügen und dann Verwenden Sie currentTarget.dataset.index ruft den aktuellen Elementindex ab

    Splice(index,1) über die Splice-Methode löschen, ein aktuelles Element löschen
Spezifische Implementierung

<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>
Nach dem Login kopieren
bindlongpress="deleteImage" data-index="{{index}}" in wxml hinzufügen um Ereignisse zu binden und einen Indexindex hinzuzufügen

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
    });
   }
  })
 }
Nach dem Login kopieren

Teil des Codes löschen

Achten Sie auf den Unterschied zwischen currentTarget und target

1. Das gebundene Ereignis wird durch das aktuelle Element und seine Unterelemente ausgelöst

2. Ziel des gebundenen Ereignisses: Das untergeordnete Element des gebundenen Ereignisses löst das Ereignis nicht aus

Effektanzeige

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf PHP Chinesische Website!

Empfohlene Lektüre:

So erstellen Sie eine React-Familien-Bucket-Umgebung


So erstellen Sie eine Webpack+React-Entwicklungsumgebung

Das obige ist der detaillierte Inhalt vonSo löschen Sie Bilder durch langes Drücken im WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage