Vue verwendet Better-Scroll, um ein Beispiel für eine horizontale Scroll-Methode zu erreichen

<div Klasse="Wrapper">
  <ul Klasse="Inhalt">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
</div>

npm install better-scroll --save //npm install import BScroll from 'better-scroll' //Better-Scroll in der Komponentendatei einführen

<Vorlage>
   /* Horizontales Scrollen */
   /* Dies ist die übergeordnete Box */
<div
        Klasse="Wrapperbox"
        Stil="Mindesthöhe:100vh;
        "
        ref="Verpackung"
        v-sonst
      >
      /* Dies ist die Subbox, der Scrollbereich*/
        <div Klasse="Inhalt" ref="WrapperChild">
          <div
            v-for="(Element, Index) in aktuellerBildliste"
            :Schlüssel="Index"
            Klasse="imgItem"
          >
            <img :src="item.img" class="img" style="margin: 0 10px;" />
          </div>
        </div>
      </div>
</Vorlage>
<Skript>
 importiere BScroll von „better-scroll“;
 Standard exportieren {
  Daten() {
    zurückkehren {
      aktuelleBildliste: [
        { img: require("../../assets/image/zzb_1.png") },
        { img: require("../../assets/image/zzb_2.png") },
        { img: erfordern("../../assets/image/zzb_3.png") }
      ],
    };
  },
  montiert() {
    this.slide_x(); //Horizontales Scrollen},
  Methoden: {
     // Initialisierung_initScroll() {
      wenn (!dieses.scroll) {
        this.scroll = new BScroll(this.$refs.wrapper, { // BScroll instanziieren und zwei Parameter akzeptieren, der erste ist der DOM-Knoten der übergeordneten Box startX: 0, /// Detaillierte Konfigurationsinformationen finden Sie in der offiziellen Dokumentation von better-scroll, die hier nicht wiederholt wird click: true,
          scrollX: wahr,
          scrollY: false, // Vertikales Scrollen ignorieren eventPassthrough: "vertical",
          useTransition: false // Verhindert anormalen Rückprall, der durch schnelles Gleiten ausgelöst wird});
      } anders {
        this.scroll.refresh(); //Wenn sich die DOM-Struktur ändert, rufen Sie diese Methode zur Neuberechnung auf, um den normalen Bildlaufeffekt sicherzustellen}
    },
    // Breite berechnen_calculateWidth() {
      // Holen Sie sich das Tag mit dem Klassennamen imgItem let rampageList = this.$refs.wrapperChild.getElementsByClassName(
        "Bildelement"
      );
      //Startbreite festlegen let initWidth = 0;
      // Durchlaufe die Labels für (let i = 0; i < rampageList.length; i++) {
        const item = rampageList[i];
        // Jede Etikettenbreite hinzufügen initWidth += item.clientWidth;
      }
      // Scrollbare Breite festlegen this.$refs.wrapperChild.style.width = `${initWidth}px`;
    },
    Folie_x() {
      this.$nextTick(() => { //this.$nextTick ist eine asynchrone Funktion, um sicherzustellen, dass das DOM gerendert wurde this._initScroll(); // Initialisierung this._calculateWidth(); // Breite berechnen });
    },
    },
   

};
</Skript>