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>

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;
}

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
  },
  // ...
});

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
    });
  }
});

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!