Vue-Projekt implementiert Löschfunktion durch Wischen nach links (vollständiger Code)

<Vorlage>
  <div>
    <div Klasse="größteBox">
      <ul>
        <!-- data-type=0 Löschtaste ausblenden data-type=1 Löschtaste anzeigen -->
        <li class="li_vessel" v-for="(item,index) in lists " data-type="0" :key="index">
          <!-- „touchstart“ wird ausgelöst, wenn der Finger den Bildschirm berührt. „touchend“ wird ausgelöst, wenn der Finger den Bildschirm verlässt. „capture“ wird zur Ereigniserfassung verwendet -->
          <div @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="sich selbst">
            <div Klasse="Kontant">
              <img class="image" :src="item.imgUrl" alt />
              <div Klasse="rechteBox">
                <div>{{item.title}}</div>
                <div>{{item.subheading}}</div>
                <div>{{item.faddish}}</div>
                <div>{{Artikelpreis}}</div>
              </div>
            </div>
          </div>
          <div class="removeBtn" @click="remove" :data-index="index">Löschen</div>
        </li>
      </ul>
    </div>
  </div>
</Vorlage>

Standard exportieren {
  Name: "Index",
  Daten() {
    zurückkehren {
      Listen: [
        {
          Titel: "Titel 1",
          imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          Unterüberschrift: „Unterüberschrift 1“,
          Modeerscheinung: „heißes Ding“,
          Preis: "￥12.00",
        },
        {
          Titel: "Titel 2",
          imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          Unterüberschrift: „Unterüberschrift 2“,
          Modeerscheinung: „heißes Ding“,
          Preis: "￥58.00",
        },
        {
          Titel: "Titel 3",
          imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          Unterüberschrift: „Unterüberschrift 3“,
          Modeerscheinung: „heißes Ding“,
          Preis: "￥99.99",
        },
        {
          Titel: "Titel 4",
          imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          Unterüberschrift: „Unterüberschrift 4“,
          Modeerscheinung: „heißes Ding“,
          Preis: "￥88.32",
        },
        {
          Titel: "Titel 5",
          imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          Unterüberschrift: „Unterüberschrift 5“,
          Modeerscheinung: „heißes Ding“,
          Preis: "￥9999.99",
        },
      ],
      startX: 0, //Folie Anfang endX: 0, //Folie Ende};
  },
  Methoden: {
    // Wenn beim Wischen nach links der Lösch-Button erscheint, klicke auf den Produktinformationsbereich, um den Löschvorgang selbst abzubrechen() {
      wenn (this.checkSlide()) {
        dies.restSlide();
      } anders {
        // Klicken Sie auf die Produktinformationen, um das Warnfeld („Hallo Word!“) anzuzeigen.
      }
    },
    //Folie starten touchStart(e) {
      //Anfangsposition aufzeichnen this.startX = e.touches[0].clientX;
    },
    //Folienende touchEnd(e) {
      // Das übergeordnete Element der aktuellen Folie let parentElement = e.currentTarget.parentElement;
      // Endposition des Datensatzes this.endX = e.changedTouches[0].clientX;
      // Löschen, wenn die linke Foliendistanz größer als 30 ist, if (parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
        dies.restSlide();
        übergeordnetesElement.dataset.type = 1;
      }
      // Nach rechts wischen, wenn (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
        dies.restSlide();
        übergeordnetesElement.dataset.type = 0;
      }
      dies.startX = 0;
      dies.endX = 0;
    },
    // Prüfen, ob sich ein Slider im Schiebezustand befindet checkSlide() {
      let listItems = document.querySelectorAll(".li_vessel");
      für (lass i = 0; i < listItems.length; i++) {
        wenn (listItems[i].dataset.type == 1) {
          gibt true zurück;
        }
      }
      gibt false zurück;
    },
    //Gleitzustand zurücksetzen restSlide() {
      let listItems = document.querySelectorAll(".li_vessel");
      // Zurücksetzen für (let i = 0; i < listItems.length; i++) {
        listItems[i].dataset.type = 0;
      }
    },
    //Dateninformationen löschen remove(e) {
      // Aktueller Indexwert let index = e.currentTarget.dataset.index;
      // this.restSlide() zurücksetzen;
      // Daten in den Array-Listen löschen this.lists.splice(index, 1);
    },
  },
};

<Stil>
* {
  /* Standardmäßige Innen- und Außenränder entfernen*/
  Rand: 0;
  Polsterung: 0;
}
Körper {
  Hintergrund: RGB (246, 245, 250);
}
.größteBox {
  overflow: hidden; /*Der überschüssige Teil ist versteckt*/
}
ul {
  /* ul-Standardstil eliminieren */
  Listenstil: keiner;
  Polsterung: 0;
  Rand: 0;
}

.li_vessel {
  /* 0,2 Sekunden Easing für alle Stile*/
  Übergang: alle 0,2 s;
}
/* =0 zum Ausblenden */
.li_vessel[Datentyp="0"] {
  transformieren: übersetzen3d(0, 0, 0);
}
/* =1 Anzeige */
.li_vessel[Datentyp="1"] {
  /* Je größer die -64px-Einstellung, desto weiter kann nach links gewischt werden. Am besten stellst du den gleichen Wert ein wie die Breite und den Positionierungsabstand des Löschbuttons darunter*/
  transformieren: übersetzen3d(-64px, 0, 0);
}
/* Schaltfläche "Löschen" */
.li_vessel .removeBtn {
  Breite: 64px;
  Höhe: 103px;
  Hintergrund: #ff4949;
  Schriftgröße: 16px;
  Farbe: #fff;
  Textausrichtung: zentriert;
  Zeilenhöhe: 22px;
  Position: absolut;
  oben: 0px;
  rechts: -64px;
  Zeilenhöhe: 103px;
  Textausrichtung: zentriert;
  Rahmenradius: 2px;
}
/* Linker Bildstil*/
.contant {
  Überlauf: versteckt; /*Beseitigt das durch das Bild verursachte Schweben*/
  Polsterung: 10px;
  Hintergrund: #ffffff;
}

.inhalt .bild {
  Breite: 80px;
  Höhe: 80px;
  Rahmenradius: 4px;
  schweben: links;
}
/* Textinformationsstil rechts*/
.rechteBox {
  Überlauf: versteckt;
  Polsterung links: 8px;
}
.rightBox div:erstes-Kind {
  Schriftstärke: fett;
}
.rightBox div:nth-child(2) {
  Rand oben: 4px;
  Schriftgröße: 14px;
}
.rightBox div:nth-child(3) {
  Breite: 24px;
  Hintergrund: rgb(219, 91, 113);
  Farbe: weiß;
  Schriftgröße: 12px;
  Textausrichtung: zentriert;
  Polsterung: 2px 4px 2px 4px;
  Rand links: automatisch;
}
.rightBox div:letztes-Kind {
  Farbe: rot;
  Schriftgröße: 14px;
  Schriftstärke: fett;
}
</Stil>

<Vorlage>
  <div>
    <div Klasse="größteBox">
      <ul>
        <!-- data-type=0 Löschtaste ausblenden data-type=1 Löschtaste anzeigen -->
        <li class="li_vessel" v-for="(item,index) in lists " data-type="0" :key="index">
          <!-- „touchstart“ wird ausgelöst, wenn der Finger den Bildschirm berührt. „touchend“ wird ausgelöst, wenn der Finger den Bildschirm verlässt. „capture“ wird zur Ereigniserfassung verwendet -->
          <div @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="sich selbst">
            <div Klasse="Kontant">
              <img class="image" :src="item.imgUrl" alt />
              <div Klasse="rechteBox">
                <div>{{item.title}}</div>
                <div>{{item.subheading}}</div>
                <div>{{item.faddish}}</div>
                <div>{{Artikel.Preis}}</div>
              </div>
            </div>
          </div>
          <div class="removeBtn" @click="remove" :data-index="index">Löschen</div>
        </li>
      </ul>
    </div>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "Index",
  Daten() {
    zurückkehren {
      Listen: [
        {
          Titel: "Titel 1",
          imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          Unterüberschrift: „Unterüberschrift 1“,
          Modeerscheinung: „heißes Ding“,
          Preis: "￥12.00",
        },
        {
          Titel: "Titel 2",
          imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          Unterüberschrift: „Unterüberschrift 2“,
          Modeerscheinung: „heißes Ding“,
          Preis: "￥58.00",
        },
        {
          Titel: "Titel 3",
          imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          Unterüberschrift: „Unterüberschrift 3“,
          Modeerscheinung: „heißes Ding“,
          Preis: "￥99.99",
        },
        {
          Titel: "Titel 4",
          imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          Unterüberschrift: „Unterüberschrift 4“,
          Modeerscheinung: „heißes Ding“,
          Preis: "￥88.32",
        },
        {
          Titel: "Titel 5",
          imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          Unterüberschrift: „Unterüberschrift 5“,
          Modeerscheinung: „heißes Ding“,
          Preis: "￥9999.99",
        },
      ],
      startX: 0, //Folie Anfang endX: 0, //Folie Ende};
  },
  Methoden: {
    // Wenn beim Wischen nach links der Lösch-Button erscheint, klicke auf den Produktinformationsbereich, um den Löschvorgang selbst abzubrechen() {
      wenn (this.checkSlide()) {
        dies.restSlide();
      } anders {
        // Klicken Sie auf die Produktinformationen, um das Warnfeld („Hallo Word!“) anzuzeigen.
      }
    },
    //Folie starten touchStart(e) {
      //Anfangsposition aufzeichnen this.startX = e.touches[0].clientX;
    },
    //Folienende touchEnd(e) {
      // Das übergeordnete Element der aktuellen Folie let parentElement = e.currentTarget.parentElement;
      // Endposition des Datensatzes this.endX = e.changedTouches[0].clientX;
      // Löschen, wenn die linke Foliendistanz größer als 30 ist, if (parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
        dies.restSlide();
        übergeordnetesElement.dataset.type = 1;
      }
      // Nach rechts wischen, wenn (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
        dies.restSlide();
        übergeordnetesElement.dataset.type = 0;
      }
      dies.startX = 0;
      dies.endX = 0;
    },
    // Prüfen, ob sich ein Slider im Schiebezustand befindet checkSlide() {
      let listItems = document.querySelectorAll(".li_vessel");
      für (lass i = 0; i < listItems.length; i++) {
        wenn (listItems[i].dataset.type == 1) {
          gibt true zurück;
        }
      }
      gibt false zurück;
    },
    //Gleitzustand zurücksetzen restSlide() {
      let listItems = document.querySelectorAll(".li_vessel");
      // Zurücksetzen für (let i = 0; i < listItems.length; i++) {
        listItems[i].dataset.type = 0;
      }
    },
    //Dateninformationen löschen remove(e) {
      // Aktueller Indexwert let index = e.currentTarget.dataset.index;
      // this.restSlide() zurücksetzen;
      // Daten in den Array-Listen löschen this.lists.splice(index, 1);
    },
  },
};
</Skript>

<Stil>
* {
  /* Standardmäßige Innen- und Außenränder entfernen*/
  Rand: 0;
  Polsterung: 0;
}
Körper {
  Hintergrund: RGB (246, 245, 250);
}
.größteBox {
  overflow: hidden; /*Der überschüssige Teil ist versteckt*/
}
ul {
  /* ul-Standardstil eliminieren */
  Listenstil: keiner;
  Polsterung: 0;
  Rand: 0;
}

.li_vessel {
  /* 0,2 Sekunden Easing für alle Stile*/
  Übergang: alle 0,2 s;
}
/* =0 zum Ausblenden */
.li_vessel[Datentyp="0"] {
  transformieren: übersetzen3d(0, 0, 0);
}
/* =1 Anzeige */
.li_vessel[Datentyp="1"] {
  /* Je größer die -64px-Einstellung, desto weiter kann nach links gewischt werden. Am besten stellst du den gleichen Wert ein wie die Breite und den Positionierungsabstand des Löschbuttons darunter*/
  transformieren: übersetzen3d(-64px, 0, 0);
}
/* Schaltfläche "Löschen" */
.li_vessel .removeBtn {
  Breite: 64px;
  Höhe: 103px;
  Hintergrund: #ff4949;
  Schriftgröße: 16px;
  Farbe: #fff;
  Textausrichtung: zentriert;
  Zeilenhöhe: 22px;
  Position: absolut;
  oben: 0px;
  rechts: -64px;
  Zeilenhöhe: 103px;
  Textausrichtung: zentriert;
  Rahmenradius: 2px;
}
/* Linker Bildstil*/
.contant {
  Überlauf: versteckt; /*Beseitigt das durch das Bild verursachte Schweben*/
  Polsterung: 10px;
  Hintergrund: #ffffff;
}

.inhalt .bild {
  Breite: 80px;
  Höhe: 80px;
  Rahmenradius: 4px;
  schweben: links;
}
/* Textinformationsstil rechts*/
.rechteBox {
  Überlauf: versteckt;
  Polsterung links: 8px;
}
.rightBox div:erstes-Kind {
  Schriftstärke: fett;
}
.rightBox div:nth-child(2) {
  Rand oben: 4px;
  Schriftgröße: 14px;
}
.rightBox div:nth-child(3) {
  Breite: 24px;
  Hintergrund: rgb(219, 91, 113);
  Farbe: weiß;
  Schriftgröße: 12px;
  Textausrichtung: zentriert;
  Polsterung: 2px 4px 2px 4px;
  Rand links: automatisch;
}
.rightBox div:letztes-Kind {
  Farbe: rot;
  Schriftgröße: 14px;
  Schriftstärke: fett;
}
</Stil>