HTML-Folie zum Löschen

Mit der Beliebtheit mobiler Geräte konzentrieren sich immer mehr Websites und Anwendungen auf das mobile Benutzererlebnis. Unter diesen ist das Schieben zum Löschen zu einer gängigen Operationsmethode geworden. In diesem Artikel wird erläutert, wie Sie mithilfe von HTML und CSS die gleitende Löschfunktion implementieren.

1. HTML-Strukturdesign

Zunächst müssen Sie die Liste entwerfen, die die Schiebe-Löschfunktion in HTML implementieren muss, zum Beispiel:

<ul>
  <li>
    <div class="item-content">
      <div class="item-title">列表标题</div>
      <div class="item-delete">
        <button>删除</button>
      </div>
    </div>
  </li>
</ul>

Unter diesen ist Elementinhalt der Hauptinhalt des Listenelements , und item-delete ist, wenn Sie zum Löschen schieben Die Schaltfläche „Löschen“ wird angezeigt. Dabei ist zu beachten, dass die beiden Elemente item-content und item-delete auf eine feste Breite eingestellt werden müssen, damit beim Schieben der gesamte Inhalt angezeigt werden kann.

2. CSS-Stildesign

Als nächstes müssen Sie CSS-Stile verwenden, um die Listenelemente zu entwerfen, einschließlich der Festlegung der Position, Höhe, Breite und anderer Attribute jedes Listenelements sowie der Festlegung von Stilen für die verschiebbare Löschschaltfläche. Sie können den folgenden Code verwenden, um dies zu erreichen:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  position: relative;
  height: 50px;
  line-height: 50px;
  background: #f0f0f0;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid #dcdcdc;
}

.item-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 60px 0 15px;
}

.item-delete {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60px;
  padding-right: 15px;
  background: #f44336;
  color: #fff;
  text-align: center;
}

.item-delete button {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

Der obige Code legt grundlegende Stile wie feste Höhe, Rahmen und Hintergrundfarbe für die Listenelemente fest und legt die absolute Positionierung für die beiden Elemente item-content und item-delete fest. Unter diesen ist das Padding-Right von Item-Content auf 60 Pixel eingestellt, während die Breite von Item-Delete auf 60 Pixel eingestellt ist und auf der rechten Seite der Schaltfläche „Löschen“ eine Lücke von 15 Pixel verbleibt.

3. JavaScript zum Implementieren des gleitenden Löschens

Schließlich muss JavaScript-Code verwendet werden, um die gleitende Löschfunktion zu implementieren. Insbesondere müssen die folgenden Aspekte berücksichtigt werden:

• Touchstart-, Touchmove- und Touchend-Ereignisse abhören, mithilfe von event.touches die Koordinaten des Berührungspunkts auf dem Bildschirm ermitteln und die horizontale Verschiebung des Berührungspunkts berechnen.
• Verwenden Sie das Transformationsattribut, um einen Gleiteffekt zu erzielen.
• Bestimmen Sie anhand der Gleitstrecke, ob die Löschschaltfläche angezeigt werden muss, und implementieren Sie die Löschfunktion, wenn die Berührung endet.

Das Folgende ist der spezifische Implementierungscode:

var startX, moveX, delWidth = 60;
var list = document.getElementsByTagName('li');

for (var i = 0; i < list.length; i++) {
  list[i]._index = i;

  list[i].addEventListener('touchstart', function(event) {
    startX = event.touches[0].clientX;
    moveX = 0;
  });

  list[i].addEventListener('touchmove', function(event) {
    moveX = event.touches[0].clientX - startX;
    if (moveX > 0) {
      this.style.transform = 'translateX(' + moveX + 'px)';
    }
  });

  list[i].addEventListener('touchend', function(event) {
    if (moveX > delWidth / 2) {
      this.style.transform = 'translateX(' + delWidth + 'px)';
      this.querySelector('.item-delete').addEventListener('click', function(event) {
        var index = event.currentTarget.parentNode.parentNode._index;
        console.log('delete item: ' + index);
        // TODO 实现删除操作
      });
    } else {
      this.style.transform = 'translateX(0px)';
    }
  });
}

Im obigen Code wird jedes Listenelement zunächst separat auf Touchstart-, Touchmove- und Touchend-Ereignisse überwacht und der Übersetzungsbetrag basierend auf dem Berührungspunkt und der Gleitentfernung berechnet. und transform wird verwendet, um den Gleiteffekt zu erzielen.

Wenn im Touchend-Ereignis der Schiebeabstand einen bestimmten Schwellenwert überschreitet, wird das Listenelement an die Position deleteWidth verschoben und der Löschschaltfläche wird ein Klickereignis hinzugefügt, um den Löschvorgang zu implementieren.

An diesem Punkt ist die Implementierung der Schiebelöschfunktion abgeschlossen. Mit den oben genannten Methoden können Sie den Sliding-Delete-Effekt einfach in HTML und CSS implementieren, das Benutzererlebnis mobiler Anwendungen und Websites optimieren und die Benutzerzufriedenheit verbessern.

Das obige ist der detaillierte Inhalt vonHTML-Folie zum Löschen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!