Explication détaillée de l'utilisation du plug-in de défilement pour vue better-scroll

Cette fois, je vais vous apporter une explication détaillée de l'utilisation du plug-in de défilement vue better-scroll. Quelles sont les précautions lors de l'utilisation du plug-in de défilement vue better-scroll. cas pratiques, jetons un coup d'oeil.

BetterScroll est actuellement connu comme le meilleur plug-in de défilement mobile, 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 roulement

Quel est le meilleur défilementPrincipe de défilement

better-scroll est un plug-in qui se concentre sur la résolution des besoins de divers scénarios de défilement côté mobile (PC déjà pris en charge). Son noyau est basé sur l'implémentation d'iscroll. Sa conception API est fondamentalement compatible avec iscroll, sur la base d'iscroll, il a étendu certaines fonctionnalités et effectué quelques optimisations des 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 content, qui est le premier élément enfant du conteneur parent, sa hauteur augmentera avec la taille du contenu. Puis, lorsque le contenu La hauteur ne dépasse pas la hauteur du conteneur parent et ne peut pas défiler. Une fois qu'elle 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. (Je n'entrerai pas trop dans les détails ici)

Faites défiler verticalement

Sans plus tarder, 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 'better-scroll';
  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 réglé pour déborder et caché, et la hauteur doit être fixe

Faites défiler horizontalement

Le défilement horizontal, par rapport au défilement vertical, nécessite d'obtenir dynamiquement la largeur de la zone de défilement et de saisir directement 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 'better-scroll';
  export default {
   data() {
    return{
     itemList:[
     {
      'title':'关注'
     },
     {
      'title':'推荐'
     },
     {
      'title':'深圳'
     },
     {
      'title':'视频'
     },
     {
      'title':'音乐'
     },
     {
      'title':'热点'
     },
     {
      'title':'新时代'
     },
     {
      'title':'娱乐'
     },
     {
      'title':'头条号'
     },
     {
      'title':'问答'
     },
     {
      'title':'图片'
     },
     {
      'title':'科技'
     },
     {
      'title':'体育'
     },
     {
      'title':'财经'
     },
     {
      'title':'军事'
     },
     {
      'title':'国际'
     }
     ]
    }
   },
   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:'vertical'
        });
       }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 latéral nécessite de l’attention.

1. Il ne peut y 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

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 articles connexes sur le php chinois. site web!

Lecture recommandée :

Sélectionner tout et inverser la sélection dans vue

Comment l'obtenir en utilisant Mint-UI plug-in de temps Sélectionnez la valeur

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!