Verwenden der Better-Scroll-Komponente in Vue zum Realisieren der horizontalen Scrollfunktion

<Vorlage>
  <div class="wrapper" ref="wrapper"> // Der einfachste Weg, DOM-Elemente in Vue zu erhalten, ist die Verwendung von this.$refs
    <ul Klasse="Inhalt">
      <li>...</li>
      <li>...</li>
      ...
    </ul>
  </div>
</Vorlage>
<Skript>
  importiere BScroll von 'better-scroll' //Importiere better-scroll
  Standard exportieren {
    montiert() {
      this.$nextTick(() => { // Verwenden Sie this.$nextTick, um sicherzustellen, dass die Komponente gerendert wurde this.scroll = new Bscroll(this.$refs.wrapper, {}) // BScroll instanziieren und zwei Parameter akzeptieren, der erste ist der Dom-Knoten der übergeordneten Box})
    }
  }
</Skript>

<Vorlage>
  <div Klasse="Befehls-Wrap">
    <div Klasse="Titel">
      <img class="title-img" src="https://imgs.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" alt="Die Hotlist dieser Woche">
      <span class="title-hotrec">Die Hotlist dieser Woche</span>
      <span class="title-allrec">Alle Diagramme</span>
    </div>
    <div ref="wrapper"> /* Dies ist die übergeordnete Box */
      <ul class="cont" ref="cont"> /* Dies ist die untergeordnete Box, der Scrollbereich*/
        <li Klasse="cont-item" v-for="Element der Empfehlungsliste" :key="item.id">
          <div Klasse="cont-img">
            <img class="img" :src="item.url" :alt="item.text">
          </div>
          <div class="cont-dest">{{item.text}}</div>
          <div Klasse="cont-price">
            <span class="Preis">￥{{Artikel.Preis}}</span>
            <span>Start</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</Vorlage>

<Skript>
BScroll von „better-scroll“ importieren

Standard exportieren {
  Name: 'HomeRecommand',
  Requisiten: {
    Empfehlungsliste: {
      Typ: Array,
      erforderlich: true
    }
  },
  Komponenten:

  },
  Daten () {
    zurückkehren {

    }
  },
  Methoden: {
    verScroll () {
      let width = this.recommendList.length * 110 // Berechnen Sie dynamisch die Größe des Scrollbereichs. Wie bereits erwähnt, liegt der Grund für das Scrollen darin, dass die Breite des Scrollbereichs größer ist als die Breite des übergeordneten Felds this.$refs.cont.style.width = width + 'px' // Ändern Sie die Breite des Scrollbereichs this.$nextTick(() => {
        wenn (!dieses.scroll) {
          this.scroll = neues BScroll(this.$refs.wrapper, {
            startX: 0, // Weitere Informationen zur Konfiguration finden Sie in der offiziellen Dokumentation von better-scroll. Ich werde hier nicht näher darauf eingehen. click: true,
            scrollX: wahr,
            scrollY: falsch,
            eventPassthrough: "vertikal"
          })
        } anders {
          this.scroll.refresh() //Rufen Sie diese Methode auf, wenn sich die DOM-Struktur ändert}
      })
    }
  },
  montiert () {
    dies.$nextTick(() => {
      let timer = setTimeout(() => { // Eigentlich möchte ich diesen Timer auch nicht schreiben, was dem Verschachteln einer weiteren Ebene von $nextTick entspricht, aber es wird fehlschlagen, wenn (timer) {
          Zeitüberschreitung löschen(Timer)
          dies.verScroll()
        }
      }, 0)
    })
  }
}
</Skript>

<style lang="scss" scoped>
  .Befehls-Wrap {
    Höhe: 0;
    Polsterung unten: 50 %;
    Rand oben: .2rem;
    Hintergrund: #fff;
    Polsterung links: .24rem;
    Breite: 100 %;
    .Titel {
      Position: relativ;
      Höhe: 40px;
      Anzeige: Flex;
      Polsterung: 12px 0;
      Box-Größe: Rahmenbox;
      .Titel-Bild {
        Breite: 15px;
        Höhe: 15px;
      }
      .title-hotrec {
        Schriftgröße: 16px;
        Rand links: 4px;
      }
      .title-allrec {
        Position: absolut;
        Polsterung oben: 2px;
        Schriftgröße: 13px;
        rechts: 20px;
        Farbe: grau;
      }
    }
    .forts. {
      Listenstil: keiner;
      // Überlauf-x: scrollen;  
      Leerzeichen: Nowrap;
      Schriftgröße: 12px;
      Textausrichtung: zentriert;
      Polsterung rechts: .24rem;
      .cont-Element {
        Position: relativ;
        Anzeige: Inline-Block;
        Polsterung: .06rem 0 .2rem;
        Breite: 2rem;
        Rand: 0,1rem;
        .cont-img {
          Überlauf: versteckt;
          Breite: 2rem;
          Höhe: 0;
          Polsterung unten: 100 %;
          .img {
            Breite: 100 %;
          }
        }
        .cont-dest {
          Rand: .1rem 0;
        }
        .cont-Preis {
          .Preis {
            Farbe: #ff8300;
          }
        }
      }
    }
  }
</Stil>