Wischen Sie auf Uniapp nach links und eine Schaltfläche zum Löschen wird angezeigt

Mit der Beliebtheit von Smartphones und der Entwicklung des mobilen Internets beginnen immer mehr Menschen, Mobiltelefone für verschiedene Vorgänge zu nutzen, einschließlich der Nutzung verschiedener Anwendungen. In Anwendungen stoßen wir normalerweise auf einige Listendaten, z. B. Adressbücher, Nachrichtenlisten, Bestelllisten usw. Diese Listen erfordern häufig Vorgänge an den Daten, wie z. B. das Anzeigen von Details, das Markieren als gelesen, das Löschen usw. Unter diesen ist der Löschvorgang ein relativ häufiger Vorgang. Dieser Artikel konzentriert sich darauf, wie man den Effekt eines Wischens nach links erzielt, um in UniApp eine Löschschaltfläche anzuzeigen.

UniApp ist ein plattformübergreifendes Entwicklungsframework, das gleichzeitig Anwendungen für mehrere laufende Plattformen (einschließlich iOS, Android, H5, Miniprogramme, Schnellanwendungen usw.) basierend auf demselben Code generieren kann. Dadurch entfällt für Entwickler die Notwendigkeit, separate Codes für jede Plattform zu schreiben, was die Entwicklungseffizienz erheblich verbessert und die Entwicklungskosten senkt. Der Beispielcode in diesem Artikel verwendet den Vue.js-Teil des UniApp-Entwicklungsframeworks als Grundlage.

1. Implementierungsidee

Um den Effekt des Schiebens nach links zu erzielen, um eine Löschschaltfläche anzuzeigen, besteht der allgemeine Ansatz darin, dem Listenelement einen verschiebbaren Bereich hinzuzufügen. Wenn der Benutzer den Bereich nach links schiebt, wird die Löschschaltfläche angezeigt . Um die Unterstützung mehrerer Plattformen gleichzeitig sicherzustellen, müssen wir Touch-Bedienungen auf Mobilgeräten und Maus-Bedienungen auf PCs berücksichtigen. Auf dieser Grundlage müssen wir die folgende Logik implementieren:

1. Schiebevorgang: Überwachen Sie Benutzervorgänge und stellen Sie fest, ob der Benutzer einen Schiebevorgang innerhalb des Zielbereichs ausgeführt hat.
2. Bedienbereich: Sie müssen dem Listenelement einen Schiebebereich hinzufügen.
3. Schaltfläche „Löschen“ anzeigen: Wenn der Benutzer im Zielbereich nach links wischt, wird die Schaltfläche „Löschen“ angezeigt.
4. Schaltfläche „Löschen“ ausblenden: Blendet die Schaltfläche „Löschen“ aus, wenn der Benutzer im Zielbereich nach rechts wischt.
5. Klicken Sie auf die Schaltfläche „Löschen“: Wenn der Benutzer auf die Schaltfläche „Löschen“ klickt, wird der Löschvorgang ausgelöst.

2. Implementierungsprozess

1. Erstellen einer Listenseite und einer Listenelementkomponente

Zuerst müssen wir eine Listenseite und eine Listenelementkomponente in der Uni erstellen -ui-Framework als Grundlagen zur Implementierung einiger grundlegender Stile und Layouts. Der spezifische Code lautet wie folgt:

<!-- list.vue -->
<template>
  <view>
    <list>
      <list-item
        v-for="(item, index) in list"
        :key="index"
        :data-index="index"
        :class="item.active ? 'item-active' : ''"
      >
        <view
          class="item-content"
          @touchstart="onTouchStart(index, $event)"
          @touchmove="onTouchMove(index, $event)"
          @touchend="onTouchEnd(index, $event)"
          @mousedown="onMouseDown(index, $event)"
          @mousemove="onMouseMove(index, $event)"
          @mouseup="onMouseUp(index, $event)"
        >
          <view class="item-title">{{item.title}}</view>
          <view class="item-delete" v-show="item.active" @click="onDeleteItem(index)">删除</view>
        </view>
      </list-item>
    </list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { title: '列表项1', active: false },
        { title: '列表项2', active: false },
        { title: '列表项3', active: false },
        { title: '列表项4', active: false },
        { title: '列表项5', active: false },
      ],
      // 记录当前操作列表项的索引、起始滑动位置、当前滑动位置等信息
      currentIndex: -1,
      startX: 0,
      startY: 0,
      moveX: 0,
      moveY: 0,
    };
  },
  methods: {
    onTouchStart(index, event) {
      this.handleTouchStart(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);
    },
    onTouchMove(index, event) {
      this.handleTouchMove(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);
    },
    onTouchEnd(index, event) {
      this.handleTouchEnd(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);
    },
    onMouseDown(index, event) {
      this.handleTouchStart(index, event.pageX, event.pageY);
    },
    onMouseMove(index, event) {
      this.handleTouchMove(index, event.pageX, event.pageY);
    },
    onMouseUp(index, event) {
      this.handleTouchEnd(index, event.pageX, event.pageY);
    },
    handleTouchStart(index, x, y) {
      if (this.currentIndex !== -1) {
        return;
      }
      this.currentIndex = index;
      this.startX = x;
      this.startY = y;
    },
    handleTouchMove(index, x, y) {
      if (this.currentIndex !== index) {
        return;
      }
      this.moveX = x;
      this.moveY = y;
      const deltaX = this.moveX - this.startX;
      const deltaY = this.moveY - this.startY;
      if (Math.abs(deltaX) > Math.abs(deltaY)) {
        if (deltaX < 0) {
          this.list[index].active = true;
        } else {
          this.list[index].active = false;
        }
      }
    },
    handleTouchEnd(index, x, y) {
      if (this.currentIndex !== index) {
        return;
      }
      this.currentIndex = -1;
      this.moveX = x;
      this.moveY = y;
      const deltaX = this.moveX - this.startX;
      const deltaY = this.moveY - this.startY;
      if (Math.abs(deltaX) > Math.abs(deltaY)) {
        if (deltaX < 0) {
          this.list[index].active = true;
        } else {
          this.list[index].active = false;
        }
      }
    },
    onDeleteItem(index) {
      this.list.splice(index, 1);
    },
  },
};
</script>

<style lang="scss">
.item-active .item-content {
  transform: translateX(-60px);
}

.item-content {
  position: relative;
  height: 60px;
  padding: 0 20px;
  line-height: 60px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  overflow: hidden;

  .item-delete {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 0 20px;
    line-height: 60px;
    background-color: #f00;
    color: #fff;
    font-size: 18px;
  }
}
</style>

Hier fügen wir einen verschiebbaren Ereignis-Listener und eine Löschschaltfläche zum Elementinhalt der Listenelementkomponente hinzu und steuern das Anzeigen und Ausblenden der Löschschaltfläche durch Hinzufügen eines aktiven Felds in den Daten . Im Stil verwenden wir das Transformationsattribut, um den Schiebeeffekt nach links zu erzielen, und das Overflow: Hidden-Attribut, um die Löschschaltfläche auszublenden.

2. Schiebeereignisse abhören

Wir müssen Berührungsereignisse überwachen, um Schiebevorgänge zu implementieren. Der Code verwendet Einzelberührungsereignisse (Berührungsereignisse) und Mausereignisse (Mousedown-, Mousemove-, Mouseup-Ereignisse), um Benutzergleitvorgänge zu überwachen. Spezifische Implementierungsdetails finden Sie im obigen Code.

3. Steuern Sie die Anzeige und das Ausblenden der Löschschaltfläche.

Wenn der Benutzer im Zielbereich nach links gleitet, müssen wir die Löschschaltfläche anzeigen. Wenn der Benutzer im Zielbereich nach rechts gleitet, müssen wir die Löschschaltfläche ausblenden . Hier implementieren wir die Steuerung der Schaltfläche „Löschen“, indem wir ein aktives Feld hinzufügen. Wenn der Benutzer nach links wischt, setzen wir das aktive Feld auf „true“, andernfalls wird es auf „false“ gesetzt.

4. Klicken Sie auf die Schaltfläche „Löschen“, um den Löschvorgang auszulösen.

Wenn der Benutzer auf die Schaltfläche „Löschen“ klickt, müssen wir den Löschvorgang auslösen. Hier löschen wir das aktuelle Element über die Splice-Methode der Vue.js-Komponenteninstanz. Informationen zur spezifischen Implementierung finden Sie in der onDeleteItem-Methode im Beispielcode.

3. Zusammenfassung

Bisher haben wir den Effekt eines Wischens nach links so vervollständigt, dass er in UniApp als Löschschaltfläche angezeigt wird. Durch die Implementierung von Schiebeereignissen, die Steuerung der Anzeige und Ausblendung der Schaltfläche „Löschen“ und das Klicken auf die Schaltfläche „Löschen“, um den Löschvorgang auszulösen, können wir den Listendaten problemlos Löschvorgänge hinzufügen.

Es ist erwähnenswert, dass wir in der tatsächlichen Entwicklung möglicherweise weitere Anforderungen erfüllen müssen, z. B. Fragen vor dem Löschen, Unterstützung des Löschens mit Mehrfachauswahl usw. Auf dieser Basis können wir je nach tatsächlichem Bedarf weitere Erweiterungen und Optimierungen vornehmen, um das Benutzererlebnis der Anwendung zu verbessern.

Das obige ist der detaillierte Inhalt vonWischen Sie auf Uniapp nach links und eine Schaltfläche zum Löschen wird angezeigt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!