Better-Scroll realisiert den Effekt der Verknüpfung von Menü und Inhalt

Better-Scroll realisiert den Effekt der Verknüpfung von Menü und Inhalt

1. Grundlegende Verwendung 

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Dokument</title>
  <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
  <Stil>
    *{
      Rand: 0;
      Polsterung: 0;
      Rand: 0;
      Gliederung: keine;
      Schriftfamilie: Arial;
      Listenstil: keiner;
      -webkit-font-smoothing: Kantenglättung;
    }
    html, Text, #app{
      Höhe: 100%;
    }
    #app{
      Polsterung: 20px 0;
      Box-Größe: Rahmenbox;
    }
    .Verpackung{
      Anzeige: Flex;
      Höhe: 100%;
      Überlauf: versteckt;
      maximale Breite: 1200px;
      Rand: 0 automatisch;
    }
    .Speisekarte{
      Breite: 100px;
      Höhe: 100%;
      Polsterung rechts: 20px;
    }
    .Inhalt{
      biegen: 1;
      Höhe: 100%;
      Überlauf: versteckt;
      Position: relativ;
    }
    .Menüpunkt{
      Rand unten: 10px;
    }
    .Menüelement-Inhalt{
      Breite: 100 %;
      Polsterung: 7px 0;
      Textausrichtung: zentriert;
      Rand: 1px durchgezogen #ddd;
      Rahmenradius: 2px;
      Farbe: #333;
      Cursor: Zeiger;
    }
    .aktiv{
      Rahmenfarbe: #409EFF;
      Hintergrund: #409EFF;
      Farbe: #fff;
    }
    .Inhaltselement{
      Rand unten: 20px;
    }
    .Inhaltselement-Text{
      Rahmenradius: 2px;
      Rand: 1px durchgezogen #ddd;
    }
    .content-item-text>img{
      Breite: 100 %;
      vertikale Ausrichtung: Mitte;
    }
  </Stil>
</Kopf>
<Text>
    <div id="app">
      <div Klasse="Wrapper">
        <div Klasse="Menü">
          <ul>
            <li class="menu-item" v-for="(item, index) im Menü" :Schlüssel="index" @click="handleClick(index)">
              <div Klasse = "Menüelementinhalt" :Klasse = "{'active': getCurrentIndex() == index}" v-text = "Element.label" </div>
            </li>
          </ul>
        </div>
        <div class="Inhalt" ref="Inhalt">
          <ul>
            <li Klasse="content-item" v-for="(item, index) in content" :key="index">
              <div Klasse="Inhaltselement-Text">
                <img :src="item" alt="">
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  <script src="https://cdn.jsdelivr.net/npm/better-scroll"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <Skript>
    neuer Vue({
      el: '#app',
      Daten: {
        contentScroll: null,
        listHeight: [], // Wird verwendet, um die Höhe jeder Subbox zu speichern currentIndex: 0,
        scrollY: 0,
        Speisekarte: [
          {
            Beschriftung: 'Bild 1',
            ID: 0,
          },
          {
            Beschriftung: 'Bild 2',
            ID: 1,
          },
          {
            Beschriftung: 'Bild 3',
            ID: 2,
          },
          {
            Beschriftung: 'Bild 4',
            ID: 3,
          },
          {
            Beschriftung: 'Bild 5',
            ID: 4,
          },
        ],
        Inhalt: [
          „https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575539093143&di=d3d787658bd0b0f21d2459d90b3bd19b&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D1735688044%2C4235283864%26fm%3D214%26gp%3D0.jpg“,
          „https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575539192878&di=f46b69a4c2db2ba2f07f0fe1cc7af952&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201210%2F04%2F20121004231502_NrBQG.jpeg“,
          „https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575539157019&di=122152eaee12d6ea019b2cec2b80e468&imgtype=0&src=http%3A%2F%2Fpic44.nipic.com%2F20140723%2F18505720_094503373000_2.jpg“,
          „https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575539175569&di=d33d35a826cc700add7b7bd53f9282c0&imgtype=0&src=http%3A%2F%2Fpic37.nipic.com%2F20140103%2F10616010_215644481373_2.jpg“,
          „https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575539212191&di=ec438ea6559d06cc1a49a27b122e8edf&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201312%2F09%2F20131209151602_evtcw.jpeg“,
        ]
      },
      Methoden: {
        initScroll() {
          const Inhalt = this.$refs.content;
          this.contentScroll = neuer BScroll(Inhalt, {
            click: true, // Weil betterscroll Klickereignisse standardmäßig verhindert. Hier müssen wir mouseWheel: true, // Mausrad-Scrolling probeType: 3, einstellen.
            scrollY: wahr,
            Bildlaufleiste: {
              fade: true, // Ob die Bildlaufleiste angezeigt werden soll interactive: false, // Neu in 1.8.0},
            preventDefault: false, // Verhindert die standardmäßige Auswahl durch den Browser });
          // Den Scroll-Wert abrufen und scrollY zuweisen
          this.contentScroll.on('scroll', pos => {
            this.scrollY = Math.abs(Math.round(pos.y));
          });
        },
        getCurrentIndex() {
          für (lass i = 0; i < this.listHeight.length; i++) {
            const Höhe = diese.Listenhöhe[i];
            const Höhe1 = diese.Listenhöhe[i + 1];
            // Lösen Sie das Problem der Menüanzeige, wenn der Inhalt beim Scrollen bis zum Ende nicht ausreicht, um in die Feldhöhe zu passen. Beim Scrollen bis zum Ende das letzte Menü auswählen // maxScrollY: maximale vertikale Scrollposition if (Math.abs(this.contentScroll.maxScrollY) === Math.abs(this.scrollY)) {
              gib diese.Inhaltslänge zurück - 1;
            }
            wenn (!höhe1 || (this.scrollY < höhe1 && this.scrollY >= höhe)) {
              gebe ich zurück;
            }
          }
        },
        handleKlick(index) {
          const Inhalt = this.$refs.content;
          const contentList = content.getElementsByClassName('content-item');
          const el = Inhaltsliste[index];
          // scrollToElement: zum Zielelement scrollen this.contentScroll.scrollToElement(el, 300);
        },
        getHöhenliste() {
          diese.listHeight = [];
          sei Höhe = 0;
          this.listHeight.push(Höhe);
          const Inhalt = this.$refs.content;
          const contentList = content.getElementsByClassName('content-item');
          für (lass i = 0; i < contentList.length; i++) {
            const item = Inhaltsliste[i];
            Höhe += Artikel.Clienthöhe;
            this.listHeight.push(Höhe);
          }
          dies.initScroll();
        }
      },
      montiert() {
        dies.$nextTick(Funktion() {
          // Da das Bild zu groß ist und langsam geladen wird, wird es initialisiert, bevor es vollständig geladen ist. Dadurch kann nicht gescrollt werden. Daher wird hier eine Zeitverzögerung hinzugefügt setTimeout(() => {
            dies.getHeightList();
          }, 400);
        });
      },
    });
  </Skript>
</body>
</html>

Aufgrund der Browserkompatibilität ist der Bildlaufleistenstil in jedem Browser unterschiedlich. Wenn Sie den CSS-Stil zum Ändern verwenden, können nur einige Browser den gewünschten Effekt erzielen.

Better-scroll simuliert die Bildlaufleiste. Der übergeordnete Container ist auf eine feste Höhe eingestellt und das Attribut overflow:hidden ist so eingestellt, dass die untergeordneten Elemente ausgeblendet werden, nachdem sie den übergeordneten Container überschritten haben. Better-scroll wirkt auf den übergeordneten Container und verwendet das Attribut transform:translate, um die untergeordneten Elemente an die gewünschte Position zu scrollen.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<:  Gründe, warum MySQL-Abfragen langsam sind

>>:  Zusammenfassung zum horizontal scrollenden Website-Design

Artikel empfehlen

Implementierung der Wiederaufnahme des K8S-Knotens in den Master-Cluster

1. Knoten löschen Führen Sie kubectl delete node ...

Probleme mit Vue, das die Homepage von Bibibili imitiert

Technische Struktur Das Projekt ist in zwei Teile...

Mysql teilt Zeichenfolge durch gespeicherte Prozedur in Array auf

Um einen String in ein Array aufzuteilen, müssen ...

So beheben Sie den MySQL-FEHLER 1045 (28000) - Zugriff wegen Benutzer verweigert

Problembeschreibung (die folgende Diskussion besc...

Detaillierte Erklärung langsamer MySQL-Abfragen

Informationen zu MySQL-Vorgängen abfragen Status ...

Fallstudie zu den SQL ROW_NUMBER()- und OVER()-Methoden

Syntaxformat: row_number() über (Partition durch ...

So konfigurieren Sie MySQL auf einem Ubuntu 16.04-Server und aktivieren die Remote-Verbindung

Hintergrund Ich lerne vor Kurzem nodejs und mir f...

So erstellen Sie eine TAR-Datei von WSL über Docker

Ich habe kürzlich mit der Remote-Entwicklungsfunk...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.16 winx64 unter win10

In diesem Artikel wird die spezifische Methode zu...

Analyse der Ideen zur Implementierung vertikaler Tabellen auf zwei Arten im Vue-Projekt

Problembeschreibung In unseren Projekten sind hor...

JavaScript implementiert coole Mouse-Tailing-Effekte

Nachdem Sie sich das angesehen haben, garantiere ...

svg+css oder js zum Erstellen eines Tick-Animationseffekts

Mein Chef hatte mich gebeten, ein Programm zu ers...

Lösung für das Problem, dass Docker-Container nicht gestoppt oder beendet werden können

Docker-Version 1.13.1 Problemprozess Ein MySQL-Co...

JavaScript-Methode zum Erkennen des Dateityps

Inhaltsverzeichnis 1. So zeigen Sie die Binärdate...

So ändern Sie die CentOS-Serverzeit auf die Peking-Zeit

1. Ich habe ein VPS- und CentOS-System gekauft un...