Comment implémenter le défilement côté mobile dans vue

Cette fois, je vais vous montrer comment implémenter le défilement côté mobile dans Vue. Quelles sont les précautions pour implémenter le défilement côté mobile dans Vue. Ce qui suit est un cas pratique, prenons un. regarder.

1. D'abord installerinstaller

npm install better-scroll --save

2. Référence

import BScroll from ‘better-scroll'

La référence dans le modèle pointe vers l'élément DOM qui défilera

Selon la description de la référence attribut dans le document officiel , on peut référencer l'élément DOM comme ceci

3 . Enregistrez la méthode _initScroll dans les méthodes, cette méthode est une instanciation de better-scroll, et cette méthode sera exécutée à l'avenir après le rendu de la structure DOM de la page

methods: {
   _initScroll(){
    this.menuScroll = new BScroll(this.$refs.menuWrapper, {})
    this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {})
   }
  }
 }

. 4. Dans la méthode Create() Dans le rappel après l'obtention réussie des données d'arrière-plan, _initScroll() est appelé

Vue met à jour le données de manière asynchrone, donc les données ne sont pas complètement chargées avant, Bscroll ne peut pas obtenir la hauteur du contenu cible, cela provoquera donc le phénomène d'impossibilité de défiler

Lecture recommandée :

Explication détaillée de l'utilisation du composant JsChart

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!