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

Detaillierte Erklärung der Syntax und des Prozesses der Ausführung von MySQL-Transaktionen

Zusammenfassung: MySQL bietet eine Vielzahl von S...

Implementierungsprozess des Nginx-Hochverfügbarkeitsclusters

Dieser Artikel stellt hauptsächlich den Implement...

MySQL-unabhängiger Index und gemeinsame Indexauswahl

Häufig fehlt das Verständnis für mehrspaltige Ind...

So installieren Sie MySQL unter Linux (Yum und Quellcode-Kompilierung)

Es gibt zwei Möglichkeiten, MySQL unter Linux zu ...

Detaillierter Prozess zur Implementierung des 2048-Minispiels im WeChat-Applet

Rendern Beispielcode Heute werden wir das WeChat-...

Detaillierte Schritte zum Erstellen der visuellen Portainer-Schnittstelle mit Docker

Um das zuletzt erwähnte Problem zu lösen, habe ic...

Zusammenfassung der Probleme bei der Installation und Verwendung des MySQL 5.7.19 Winx64 ZIP-Archivs

Heute habe ich gelernt, MySQL zu installieren. Da...

So erstellen Sie eine Swap-Partitionsdatei in Linux

Einführung in Swap Swap (d. h. Swap-Partition) in...

Detaillierte Erklärung der Ansichten in MySQL

Sicht: Ansichten in MySQL haben viele Ähnlichkeit...

Beispielanalyse der Verwendung des neuen JSON-Feldtyps in MySQL 5.7

Dieser Artikel veranschaulicht anhand eines Beisp...

Zwei Möglichkeiten, den 30-Sekunden-Werbecode aus dem Youku-Video zu entfernen

Ich glaube, jeder kennt dieses Gefühl: Ein Video m...

Neue Möglichkeiten zum Spielen mit CSS-Schriftarten: Implementierung farbiger Schriftarten

Was wäre, wenn Ihre Designer die folgende Schrift...

Implementierungsschritte zur Installation eines Redis-Containers in Docker

Inhaltsverzeichnis Redis auf Docker installieren ...

Bezüglich des Problems der Verwendung von Webpack-Anweisungen in VSCode, das anzeigt: „Weil das Ausführen von Skripten in diesem System verboten ist“ (perfekte Lösung)

Wenn ich Vue lerne und immer Webpack-Anweisungen ...

So erstellen Sie mit Harbor ein privates Docker-Repository

Inhaltsverzeichnis 1. Open-Source-Lagerverwaltung...