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

Il faut noter ici qu'après les données est obtenu avec succès, le Dom direct n'est pas nécessairement le rendu après l'obtention des données, vous devez donc utiliser la méthode this.nextTick(), utiliser _initScroll() dans le rappel de this.nextTick; Regardez la description officielle de this.$nextTick()

Nous devrions donc l'écrire comme ceci dans le projet :

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres sujets connexes sur l'article du site Web PHP chinois !

Lecture recommandée :

L'application côté Web implémente l'actualisation de force arrière

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!