Un guide complet sur l'utilisation d'un meilleur défilement pour obtenir des effets de défilement dans Vue

Un guide complet sur l'utilisation de better-scroll pour obtenir des effets de défilement dans Vue

En tant que framework JavaScript progressif, Vue doit naturellement implémenter certains effets de défilement qui doivent être utilisés sur l'interface. Différent du JavaScript natif, Vue a un cycle de vie et une pensée composée de composants plus pratiques, et nécessite également des plug-ins de défilement plus efficaces et plus flexibles pour implémenter des fonctions complexes. Better-scroll est un puissant plug-in de défilement qui prend en charge divers navigateurs grand public et appareils mobiles. C'est également l'une des bibliothèques les plus populaires sous Vue. Cet article présentera en détail la méthode d'utilisation d'un meilleur défilement pour obtenir l'effet de défilement Vue. J'espère que cela sera utile aux débutants.

1. Pré-connaissances

Utiliser better-scroll pour obtenir des effets de défilement dans Vue nécessite certaines réserves de pré-connaissances, qui incluent principalement les aspects suivants :

# 🎜🎜#

Bases de Vue : Comprendre les concepts de base tels que le cycle de vie de Vue, les composants et le transfert de données ;
1. Bases de JavaScript : Comprendre les variables de base, les fonctions, les objets, les tableaux et la syntaxe ES6 ; #🎜 🎜#
2. npm : Savoir comment installer npm et comment introduire les bibliothèques de plugins dans Vue.
3. 2. Installez et introduisez better-scroll

La façon d'installer better-scroll est très simple, entrez simplement la commande suivante dans le terminal : #🎜 🎜#

npm install better-scroll --save

Introduire better-scroll est également très pratique. Il existe généralement deux façons de l'introduire :

Introduire better-scroll à l'échelle mondiale

1. Introduire better-scroll dans main.js et le monter sur Vue Sur le prototype, appelez-le via this.$bs là où il doit être utilisé. Comme indiqué ci-dessous :

import Vue from 'vue'
import BScroll from 'better-scroll'
 
Vue.prototype.$bs = BScroll

Introduction locale de better-scroll

2. Utilisez l'instruction import pour introduire better-scroll là où elle doit être utilisée ,Comme indiqué ci-dessous：

import BScroll from 'better-scroll'

3. Utilisez better-scroll pour obtenir un effet de défilement

Après avoir installé et introduit better-scroll, nous pouvons commencer à utiliser better-scroll dans Vue pour obtenir un effet de défilement. Les étapes spécifiques sont les suivantes :

Structure HTML

1. Tout d'abord, nous devons construire la structure des éléments qui doit défiler dans la Vue modèle, comme indiqué ci-dessous :

<template>
  <div class="wrapper">
    <div class="content">
      <!-- 需要滚动的内容 -->
    </div>
  </div>
</template>

Ici, nous utilisons le wrapper pour envelopper le contenu, et plus tard, nous utiliserons le wrapper comme conteneur pour initialiser un meilleur défilement.

Style CSS

2. Ensuite, nous devons définir le style de base pour le wrapper et le contenu, comme indiqué ci-dessous :

.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
 
.content {
  position: absolute;
  top: 0;
  left: 0;
}

# 🎜🎜#Ici, nous définissons le wrapper sur un positionnement relatif, et définissons la hauteur et la largeur nécessaires, ainsi que l'attribut overflow:hidden. Le contenu est défini sur un positionnement absolu pour faciliter les interactions de défilement ultérieures.

Initialize better-scroll

Ensuite, nous devons initialiser better-scroll dans le cycle de vie créé du composant Vue, comme suit :

3. export default {
     data() {
       return {};
     },
     created() {
       const wrapper = this.$refs.wrapper;
       
       this.scroll = new this.$bs(wrapper, {
         // options
       });
     },
     mounted() {},
     methods: {},
     destroyed() {}
   };

Ici, nous utilisons this.$refs.wrapper pour obtenir l'élément wrapper précédemment construit, puis initialisons pour mieux faire défiler le nouveau this.$bs(). Avant l'initialisation, nous pouvons également transmettre des éléments de configuration pertinents dans le deuxième paramètre, tels que la direction de défilement, les événements de défilement, les barres de défilement, etc.

Détruire better-scroll

Afin de garantir la fluidité des pages et l'efficacité de l'utilisation de la mémoire, nous devons détruire manuellement better-scroll avant la destruction des composants . Comme indiqué ci-dessous :

4. export default {
     data() {
       return {};
     },
     created() {
       const wrapper = this.$refs.wrapper;
       
       this.scroll = new this.$bs(wrapper, {
         // options
       });
     },
     mounted() {},
     methods: {},
     destroyed() {
       this.scroll.destroy();
     }
   };

Ici, nous détruisons mieux-faites défiler this.scroll.destroy() dans le cycle de vie de destroy().

5. Exemple de code

Enfin, nous donnons un exemple de code complet auquel les lecteurs peuvent se référer et apprendre :

<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <ul>
        <li v-for="(item, index) in list" :key="index">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>
 
<script>
import BScroll from 'better-scroll'
 
export default {
  data() {
    return {
      list: ['Vue', 'React', 'Angular', 'jQuery', 'Backbone', 'Ember'],
    };
  },
  created() {
    const wrapper = this.$refs.wrapper;
    
    this.scroll = new BScroll(wrapper, {
      scrollY: true,
      scrollX: false,
      click: true,
      bounce: true,
      scrollbar: {
        fade: true,
      },
    });
  },
  destroyed() {
    this.scroll.destroy();
  },
};
</script>
 
<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
 
.content {
  position: absolute;
  top: 0;
  left: 0;
}
 
li {
  height: 50px;
  line-height: 50px;
  background-color: #f1f1f1;
  text-align: center;
  font-size: 20px;
  margin: 10px 0;
  border-radius: 5px;
}
</style>

6. Résumé# 🎜 🎜#

Grâce à l'introduction de cet article, les lecteurs peuvent apprendre à installer, introduire et utiliser better-scroll dans Vue pour obtenir divers effets de défilement. Dans le même temps, nous avons également appris certains éléments de configuration continus et méthodes de cycle de vie courants pour jeter les bases d'un développement et d'un apprentissage ultérieurs. J'espère que cet article sera utile aux lecteurs. S'il y a des lacunes, veuillez les signaler.

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!