Verwenden Sie das WeChat-Applet, um die Drag-and-Drop-Sortierfunktion zu implementieren

WBOY
Freigeben: 2023-11-21 08:44:14
Original
2490 Leute haben es durchsucht

Verwenden Sie das WeChat-Applet, um die Drag-and-Drop-Sortierfunktion zu implementieren

Verwenden Sie das WeChat-Applet, um die Drag-and-Drop-Sortierfunktion zu implementieren. Beispielcode

Als ich anfing, das WeChat-Applet zu lernen, dachte ich immer, dass die Implementierung der Drag-and-Drop-Sortierfunktion sehr schwierig sei. Indem ich mich jedoch mit der offiziellen Dokumentation befasste und verschiedene Ansätze ausprobierte, gelang es mir schließlich, diese Funktionalität zu implementieren. In diesem Artikel werde ich spezifische Codebeispiele vorstellen, die die Drag-and-Drop-Sortierfunktion implementieren.

Erstellen Sie zunächst eine Liste aller sortierbaren Elemente in einer WXML-Datei. Zum Beispiel:

<view class="sortable-list">
  <view wx:for="{{items}}" wx:key="unique-key" wx:for-item="item" wx:for-index="index" class="sortable-item"
    data-index="{{index}}" bindtouchstart="onDragStart" bindtouchmove="onDragging" bindtouchend="onDragEnd"
    bindtouchcancel="onDragEnd">
    {{item}}
  </view>
</view>
Nach dem Login kopieren

In der Stildatei wxss müssen wir den sortierbaren Elementen einige Stile hinzufügen, um sie ziehbar zu machen. Zum Beispiel:

.sortable-item {
  padding: 10rpx;
  background-color: #F7F7F7;
  margin-bottom: 10rpx;
  border: 1rpx solid #CCCCCC;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.sortable-item.dragging {
  opacity: 0.6;
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
  z-index: 999;
  border-color: #33CCFF;
}
Nach dem Login kopieren

In der entsprechenden js-Datei müssen wir einige Ereignisbehandlungsfunktionen definieren, um die Drag-and-Drop-Sortierung zu implementieren. Zuerst müssen wir eine sortierte Liste von Elementen und einen Indexwert „draggingIndex“ im Datenfeld der Seite definieren:

Page({
  data: {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
    draggingIndex: -1
  },
  // ...
});
Nach dem Login kopieren

Als nächstes müssen wir Ereignishandler für Drag-Start, Drag-Prozess und Drag-Ende implementieren:

Page({
  data: {
    // ...
  },
  onDragStart(e) {
    this.setData({
      draggingIndex: e.currentTarget.dataset.index
    });
  },
  onDragging(e) {
    const index = e.currentTarget.dataset.index;
    const draggingIndex = this.data.draggingIndex;

    if (draggingIndex !== -1) {
      const items = this.data.items;
      const [item] = items.splice(draggingIndex, 1);
      items.splice(index, 0, item);

      this.setData({
        items
      });
      this.setData({
        draggingIndex: index
      });
    }
  },
  onDragEnd(e) {
    this.setData({
      draggingIndex: -1
    });
  }
});
Nach dem Login kopieren

Im Mit dem Drag-Start-Ereignishandler onDragStart erhalten wir den Indexwert des aktuellen Drag-Elements und speichern ihn im Feld „draggingIndex“ in den Daten.

Im Drag-Prozess-Ereignishandler onDragging entfernen wir das Drag-Element von seiner ursprünglichen Position und fügen es an der aktuellen Drag-Position ein. Abschließend speichern wir die geänderte Liste in den Daten und aktualisieren den Indexwert des aktuellen Drag-Elements.

Im Drag-End-Ereignishandler onDragEnd setzen wir das DraggingIndex-Feld in den Daten auf -1 zurück, was das Ende des Drag-Vorgangs anzeigt.

Das Obige ist das vollständige Codebeispiel zur Implementierung der Drag-and-Drop-Sortierfunktion des WeChat-Applets. Durch Ausführen dieses Codes können wir die Drag-and-Drop-Sortierfunktion im Miniprogramm implementieren. Ich hoffe, dieses Codebeispiel ist hilfreich! Wenn Sie Fragen haben, können Sie diese gerne stellen!

Das obige ist der detaillierte Inhalt vonVerwenden Sie das WeChat-Applet, um die Drag-and-Drop-Sortierfunktion zu implementieren. 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