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

Über die Probleme von Kongruenz und Ungleichheit, Gleichheit und Ungleichheit in JS

Inhaltsverzeichnis Kongruent und inkongruent kong...

Lösen Sie das Problem verstümmelter chinesischer Zeichen, wenn Sie Daten von Tomcat unter Linux in MySQL einfügen

1. Problem Das mit Eclipse unter Windows entwicke...

Lösen Sie das Problem der Verwendung von weniger in Vue

1. Installieren Sie weniger Abhängigkeiten: npm i...

Zusammenfassung häufig verwendeter Befehle für Linux-Dateioperationen

0. Neuer Betrieb: mkdir abc #Erstelle einen neuen...

So konfigurieren Sie Tomcat und führen Ihr erstes Java-Webprojekt auf IntelliJ IDEA 2018 aus

1 Tomcat herunterladen und starten Gehen Sie auf ...

Tutorial zum Zurücksetzen des Root-Passworts von Mac MySQL

Haftungsausschluss: Mit dieser Methode zum Zurück...

Analyse und Neugestaltung von Musikplayer-Apps (Anwendungssoftware) So gestalten Sie eine ansprechende Musikplayer-Oberfläche

Ich habe mich schon immer für drahtlose Interakti...

So verwenden Sie den Linux-Befehl „basename“

01. Befehlsübersicht Basisname - entfernt Verzeic...

So verwenden Sie Typescript zum Kapseln von lokalem Speicher

Inhaltsverzeichnis Vorwort Szenarien für die Verw...

Detaillierte Erklärung der Verwendung der Compose-Funktion und der Pipe-Funktion in JS

Inhaltsverzeichnis Funktion „Verfassen“ Array.Pro...

Optimieren der langsamen Abfrage von MySQL-Aggregatstatistikdaten

Vorne geschrieben Wenn wir in unserem täglichen L...

Formatieren der Linux-Systemfestplatte und manuelles Hinzufügen einer Swap-Partition

Windows: Unterstützt NTFS, FAT Linux unterstützt ...

Perfekte Lösung für das Problem, dass Windows Server 2012 oder 2016 .NET Framework 3.5 nicht ohne Festplatte installieren kann

Problembeschreibung Bei Verwendung von Windows Se...

Detaillierte Erklärung zur Installation und vollständigen Deinstallation von MySQL mit apt-get unter Ubuntu

1. Installieren Sie MySQL: udo apt-get installier...

Detaillierte Diskussion zum Thema mysqldump-Datenexport

1. Bei der Verwendung von mysqldump wird ein Fehl...