Comment utiliser le plug-in Better-Scroll dans Vue

Cet article présente principalement l'explication détaillée de l'utilisation du plug-in vue better-scroll. Je vais maintenant le partager avec vous et vous donner une référence.

Qu'est-ce que better-scroll

better-scroll est une solution de défilement mobile Elle est basée sur la réécriture d'iscroll. La principale différence entre celle-ci et iscroll est ici. . better-scroll est également très puissant. Il peut non seulement créer des listes déroulantes ordinaires, mais également des graphiques carrousel, des sélecteurs, etc.

Ajoutez l'exemple de code référencé par

import BScorll from 'better-scroll';

dans le fichier requis :

let scroll = new BScroll(Dom对象, {//options
 startX: 0,
 startY: 0
})

Vue obtient la méthode objet Dom,

<p v-el:food-wrapper></p>//定义对象
this.$els.foodWrapper//获取对象

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

Afin de résoudre le problème ci-dessus problème, utilisez nextTick( ; Pour exécuter un certain morceau de code, vous devez mettre ce morceau de code dans la boucle d'événement suivante, telle que setTimeout(fn, 0), afin que ce morceau de code soit exécuté immédiatement après le DOM est mis à jour)

<🎜.>

Problème :

// DOM 还没有更新
Vue.nextTick(function () {
 // DOM 更新了
})

Sur la page PC, les clics ne seront pas bloqués par better-scroll. Après initialisation, les événements sont répartis pour mieux. -faites défiler pour que le côté mobile ait des événements de clic, donc passez au côté PC. Lorsque vous cliquez dessus, l'événement de clic sera exécuté deux fois. Méthode

 : Lorsque vous cliquez dessus, la variable $event est transmise. dans le plug-in Better-scroll a des attributs différents de l'événement dans le js natif. Lors de la distribution d'événements, event_constructed est vrai. Les événements de clic natifs n'ont pas cet attribut. 🎜>Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

selectMenu(index,event){
  if(!event._constructed){//如果不存在这个属性,则不执行下面的函数
    return;
  }
}

Comment résoudre le problème du désalignement de la barre de défilement niceScroll dans jQuery

Comment implémenter l'interface de recherche Baidu dans JS

Comment implémenter la fonction boule double couleur en 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!