Detaillierte Erklärung des Vue-Scroll-Achsen-Plug-Ins Better-Scroll

Dieser Artikel stellt hauptsächlich die Verwendung des Vue-Scroll-Achsen-Plug-Ins detailliert vor. Ich hoffe, dass es jedem helfen kann.

Im Vue-High-Imitation-Takeout-Projekt von MOOC.com wird ein sehr nützliches Plug-in BScroll verwendet, um den entsprechenden Lebensmittelbereich zu berechnen, der in der linken Menüspalte entsprechend der rechten Lebensmittelspalte angezeigt wird, wenn kein Plug-in vorhanden ist -in verwendet wird, ist ziemlich mühsam, daher werde ich hier die einfache Verwendung dieses Plug-Ins teilen:

1 Laden Sie es im Projekt herunter und stellen Sie es vor

Führen Sie die Version in der Konfigurationsdatei package.json ein

"dependencies": {
  "better-scroll": "^0.1.7"
 }

Geben Sie dann das Projektverzeichnis ein und öffnen Sie cmd, um die Konfiguration zu aktualisieren

npm i (i是install缩写)

Stellen Sie es zum Schluss vor, zum Beispiel bin ich in der Projektwarenkomponente verwendet:

import BScroll from 'better-scroll';

2. Zum Beispiel,

Nachfrage steht beispielsweise in der aktuellen Bestseller-Spalte, dann ist die Menüleiste hervorgehoben. Scrollen Sie zur nächsten hervorgehobenen Spalte und das Menü in der nächsten Spalte wird hervorgehoben. Klicken Sie auf eine bestimmte Spalte im Menü, um sie hervorzuheben und zum entsprechenden Lebensmittelbereich zu springen.

Das Folgende ist der Code in der Lebensmittelkomponente

Vorlage:

<template>
 <p class="goods">
  <p class="menu-wrap" ref="menuWrap">//菜单栏
   <ul>
    <li v-for="(item,index) in goods" class="menu-item" :class="{&#39;current&#39;:currentIndex===index}" @click="selectMenu(index,$event)">
     <span class="text border-1px">
      <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
     </span>
    </li>
   </ul>
  </p>
  <p class="foods-wrap" ref="foodsWrap">//食物栏
  </p>
 </p>
</template>

Skript

Verwandte Empfehlungen:

vue verwendet Better-Scroll, um Karussellbilder und Seitenscrollen zu implementieren

JS implementiert den benutzerdefinierten Scroll-Scroll-Effekt

Über das jQuery-Scrolling-Plug-in scrollable.js Nutzungsanalyse

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Vue-Scroll-Achsen-Plug-Ins Better-Scroll. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!