Vue implementiert eine Registerkartennavigationsleiste und unterstützt die Schiebefunktion nach links und rechts

<Abschnitt Klasse="Themenliste">
  <div Klasse="fixed-nav" ref="fixednav">
    <div Klasse="fester Navigationsinhalt">
      <p
        v-for="(Element, Index) im Thema"
        :Schlüssel="Index"
        :Klasse="['Tab-Titel', ActiveId === Index && 'Tab-Auswahl']"
        @click="Tab ändern(index, $ereignis)"
      >
        {{ Artikel }}
      </p>
    </div>
  </div>
</Abschnitt>

Thema: ['CSDN-Blog', 'Blog-Garten', 'Viel Glück bei der College-Aufnahmeprüfung', 'Viel Glück bei der Highschool-Aufnahmeprüfung', 'Kleine Freude', 'Siebzigster Jahrestag'],
Aktive ID: 0

.Themenliste {
  Rand oben: 12px;
}
.feste-Navigation {
  Überlauf-x: scrollen;
  -webkit-overflow-scrolling: berühren;
}
.fixierter-Navigationsinhalt {
  Anzeige: Flex;
}
.tab-Titel {
  Polsterung: 0 13px;
  Rand rechts: 12px;
  Farbe: #141414;
  Rahmenradius: 13px;
  Schriftgröße: 12px;
  Flex-Schrumpfen: 0;
  Höhe: 0,52rem;
  Zeilenhöhe: 0,52rem;
}

changeTab(id, Ereignis) {
  // Wenn die ausgewählte nicht mit der aktuell aktiven übereinstimmt if (id !== this.activeId) {
    diese.activeId = ID;
    // Berechnen Sie die Position der aktuellen Schaltfläche, um zu sehen, ob sie verschoben werden muss const spanLeft = event.clientX; // Der linke Abstand des aktuell angeklickten Elements const divBox = document.querySelector(".select-tab").clientWidth / 2; // Die halbe Breite des angeklickten Elements const totalWidths = document.body.clientWidth; // Gesamte Bildschirmbreite const widths = totalWidths / 2; // Die halbe Bildschirmbreite const spanRight = totalWidths - spanLeft; // Der rechte Abstand des Elements const scrollBox = document.querySelector(".fixed-nav"); // Holen Sie das äußerste Element const scrollL = scrollBox.scrollLeft; // Die Distanz, über die die Bildlaufleiste scrollt // Gleiten, wenn der linke oder rechte Abstand des Elements weniger als 100 beträgt if (spanRight < 100 || spanLeft < 100) {
      scrollBox.scrollLeft = scrollL + (spanLeft - Breiten) + divBox;
    }
  }
}

/*Definieren Sie die Höhe und Breite der Bildlaufleiste und die Höhe und Breite des Hintergrunds entsprechend der Größe der horizontalen und vertikalen Bildlaufleiste*/
::-webkit-scrollbar {
  Breite: 0,01rem;
  Deckkraft: 0;
  Anzeige: keine;
}
/*Definieren Sie den inneren Schatten + die abgerundeten Ecken der Bildlaufleiste*/
::-webkit-scrollbar-track {
  Hintergrundfarbe: #fff;
  Deckkraft: 0;
}
/*Definieren Sie den inneren Schatten + die abgerundeten Ecken des Schiebereglers*/
::-webkit-scrollbar-thumb {
  Breite: 0,01rem;
  Randradius: 0,01rem;
  Deckkraft: 0;
}