Maison > interface Web > js tutoriel > Explication détaillée de l'utilisation du plug-in de défilement pour vue better-scroll

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

php中世界最好的语言
Libérer: 2018-04-12 17:18:52
original
4306 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal