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

Teilen einiger wunderbarer Verwendungsmöglichkeiten von wxs-Dateien im WeChat-Applet

Inhaltsverzeichnis Vorwort Anwendung Filter Ziehe...

Detaillierte Erklärung der Verwendung und Unterschiede verschiedener Sperrmechanismen in Linux

Vorwort: Ich glaube, dass diejenigen, die dieses ...

MySQL-Serververbindung, Trennung und cmd-Bedienung

Verwenden Sie den Befehl mysql, um eine Verbindun...

Webseiten-Erlebnis: Farbabstimmung für Webseiten

<br />Die Farbe einer Webseite ist entscheid...

Installieren Sie Docker offline, indem Sie RPM und zugehörige Abhängigkeiten mit Yum herunterladen.

Sie können yum verwenden, um alle Abhängigkeiten ...

HTML-Tutorial: Ungeordnete Liste

<br />Originaltext: http://andymao.com/andy/...

So installieren Sie MySQL mit Yum auf Centos7 und stellen eine Remote-Verbindung her

Centos7 verwendet Yum, um MySQL zu installieren u...

Lösung zum Importieren weiterer Daten aus MySQL in Hive

Ursprünglicher abgeleiteter Befehl: bin/sqoop imp...

Einführung und detaillierte Verwendung von React Fragment

Inhaltsverzeichnis Vorwort Motivation für Fragmen...

Wird der veraltete Docker durch Podman ersetzt?

Das Kubernetes-Team hat vor Kurzem angekündigt, d...

So zeichnen Sie eine vertikale Linie zwischen zwei Div-Tags in HTML

Als ich kürzlich eine Schnittstelle zeichnete, st...

Detaillierte Erläuterung des Linux-Einzeilenbefehls zur Verarbeitung von Batchdateien

Vorwort Die beste Methode ist möglicherweise nich...

Detaillierte Erläuterung von 2 Methoden zum Synchronisieren der Netzwerkzeit im Linux/CentOS-System

Aus Hardwaregründen kann es vorkommen, dass die M...

js zur Implementierung einer Interferenz mit Verifizierungscodes (statisch)

In diesem Artikel wird der spezifische Code von j...

Verwenden Sie das Label-Tag, um das Optionsfeld auszuwählen, indem Sie auf den Text klicken

Das <label>-Tag definiert eine Bezeichnung (...