Utiliser le plug-in de défilement amélioré dans vue

Cet article présente principalement l'explication détaillée du dépannage du plug-in de défilement vue better-scroll. Maintenant, je le partage avec vous et vous donne une référence.

BetterScroll est connu comme le meilleur plug-in de défilement mobile à l'heure actuelle, sa puissance est donc définitivement là. Sinon...haha. Personnellement, je pense que c'est très utile. Cet article ne concerne pas BetterScroll en général, mais le défilement en détail. Si vous souhaitez en savoir plus, rendez-vous ici.

Principe de défilement

Qu'est-ce qui est mieux-faire défilerPrincipe de défilement

mieux- scroll est un plug-in qui se concentre sur la résolution des besoins de divers scénarios de défilement sur le terminal mobile (le PC est déjà pris en charge). Son noyau est basé sur l'implémentation d'iscroll. Sa conception API est fondamentalement compatible avec iscroll, il a étendu certaines fonctionnalités et réalisé quelques optimisations de performances.

better-scroll est implémenté sur la base de JS natif et ne repose sur aucun framework. Sa taille de code compilé est de 63 Ko, 35 Ko après compression et seulement 9 Ko après gzip. Il s'agit d'une bibliothèque JS très légère.

La partie verte est le wrapper, qui est le conteneur parent, et elle aura une hauteur fixe. La partie jaune est le contenu, qui est le premier élément enfant du conteneur parent. Sa hauteur augmentera avec la taille du contenu. Ensuite, lorsque la hauteur du contenu ne dépasse pas la hauteur du conteneur parent, il ne peut plus défiler. Une fois qu'il dépasse la hauteur du conteneur parent, nous pouvons faire défiler la zone de contenu. Le principe du défilement horizontal est de changer la hauteur fixe en une largeur fixe. (Plus de verbosité ici)

Défilement vertical

Sans plus attendre, passons directement au code.

<template>
 <p class="wrapper" ref="wrapper">
   <ul>
    <li v-for="item in 8">{{item}}</li>
   </ul>
 </p>
</template>
<script>
 import BScroll from &#39;better-scroll&#39;;
  export default {
   mounted() {
    this.$nextTick(() => {
     this.scroll = new BScroll(this.$refs.wrapper);
    });
   }
  };
</script>
<style type="text/css">
 .wrapper{
  overflow:hidden;
  height:100vh;
 }
 ul li{
  height:400px;
 }
</style>

Il s'agit d'une démo à défilement vertical de Vue BetterScroll. Il y a deux points à noter ici.

1. Il ne peut y avoir qu'un seul niveau de parent p, c'est-à-dire le conteneur

2. Le parent p doit être configuré pour déborder en se cachant et avoir une hauteur fixe

Défilement horizontal

Défilement horizontal Par rapport au défilement vertical, vous devez obtenir dynamiquement la largeur de la zone de défilement et directement. entrez le code.

<template>
 <p class="tab" ref="tab">
  <ul class="tab_content" ref="tabWrapper">
   <li class="tab_item" v-for="item in itemList" ref="tabitem">
     {{item.title}}
   </li>
  </ul>
 </p>
 </template>
 <script>
 import BScroll from &#39;better-scroll&#39;;
  export default {
   data() {
    return{
     itemList:[
     {
      &#39;title&#39;:&#39;关注&#39;
     },
     {
      &#39;title&#39;:&#39;推荐&#39;
     },
     {
      &#39;title&#39;:&#39;深圳&#39;
     },
     {
      &#39;title&#39;:&#39;视频&#39;
     },
     {
      &#39;title&#39;:&#39;音乐&#39;
     },
     {
      &#39;title&#39;:&#39;热点&#39;
     },
     {
      &#39;title&#39;:&#39;新时代&#39;
     },
     {
      &#39;title&#39;:&#39;娱乐&#39;
     },
     {
      &#39;title&#39;:&#39;头条号&#39;
     },
     {
      &#39;title&#39;:&#39;问答&#39;
     },
     {
      &#39;title&#39;:&#39;图片&#39;
     },
     {
      &#39;title&#39;:&#39;科技&#39;
     },
     {
      &#39;title&#39;:&#39;体育&#39;
     },
     {
      &#39;title&#39;:&#39;财经&#39;
     },
     {
      &#39;title&#39;:&#39;军事&#39;
     },
     {
      &#39;title&#39;:&#39;国际&#39;
     }
     ]
    }
   },
   created() {
    this.$nextTick(() => {
     this.InitTabScroll();
    });
   },
   methods:{
    InitTabScroll(){
     let width=0
     for (let i = 0; i <this.itemList.length; i++) {
       width+=this.$refs.tabitem[0].getBoundingClientRect().width; //getBoundingClientRect() 返回元素的大小及其相对于视口的位置
     }
     this.$refs.tabWrapper.style.width=width+&#39;px&#39;
     this.$nextTick(()=>{
       if (!this.scroll) {
        this.scroll=new BScroll(this.$refs.tab, {
         startX:0,
         click:true,
         scrollX:true,
         scrollY:false,
         eventPassthrough:&#39;vertical&#39;
        });
       }else{
        this.scroll.refresh()
       }
     });
    }
   }
  };
 </script>
 <style lang="scss" scoped>
 .tab{
  width: 100vw;
  overflow: hidden;
  padding:5px;
  .tab_content{
   line-height: 2rem;
   display: flex;
   .tab_item{
    flex: 0 0 60px;
    width:60px;
   } 
  }
 } 
 </style>

Le défilement horizontal nécessite de l'attention.

1. ne peut avoir qu'un seul niveau de parent p, c'est-à-dire le conteneur

2. Le conteneur parent doit définir un masquage de débordement et une largeur fixe

3. Obtenir dynamiquement la largeur de la zone de défilement

En raison des besoins d'un projet récent, j'ai vérifié beaucoup d'informations sur Internet mais j'ai pu ne résout pas mon problème. Le site officiel de BetterScroll ne fournit pas de véritable référence de démonstration, j'ai donc profité de ma pause pour écrire cet article. J'espère que cela vous sera utile. Si vous avez besoin d'une démo spécifique, déplacez-vous ici et n'oubliez pas de lui donner une étoile. Écrire des articles n'est pas facile, alors donnez-lui un like !

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment intégrer vue dans les projets jquery/bootstrap ?

À propos de l'utilisation de vue-fontawesome dans vue.js

Utilisez JS pour ajouter de nouveaux éléments au nœud

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!