Explication détaillée du plug-in de l'axe de défilement de vue better-scroll

Cet article présente principalement en détail comment utiliser le plug-in vue scroll axis pour mieux faire défiler. Les amis intéressés peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

Un plug-in très utile, BScroll, est utilisé dans le projet Vue high-imitation takeout du MOOC.com, qui permet de calculer la surface alimentaire affichée dans la colonne du menu de gauche correspondant à la colonne des aliments de droite. . Si aucun plug-in n'est utilisé, c'est assez gênant, je vais donc partager ici l'utilisation simple de ce plug-in :

1 Téléchargez-le dans le projet et présentez-le
.

Introduisez la version dans le fichier de configuration package.json

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

Entrez ensuite dans le répertoire du projet, ouvrez cmd pour mettre à jour la configuration

npm i (i是install缩写)

Enfin, présentez-le, par exemple, je suis dans Utilisé dans le composant biens du projet :

import BScroll from 'better-scroll';

2 . Par exemple, la demande

est dans la colonne des meilleures ventes actuelles, puis la barre de menu est mise en surbrillance. Faites défiler jusqu'à la colonne suivante en surbrillance et le menu de la colonne suivante sera mis en surbrillance. Cliquez sur une certaine colonne du menu pour la mettre en surbrillance et accéder à la zone alimentaire correspondante.

Ce qui suit est le code dans le composant alimentaire

modèle :

<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>

script

Recommandations associées :

vue utilise un meilleur défilement pour implémenter des images de carrousel et le défilement des pages

JS implémente un effet de défilement personnalisé

À propos de l'analyse de l'utilisation du plug-in de défilement jQuery scrollable.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!