Detaillierte Erläuterung der Verwendung des Scroll-Plug-Ins für Vue Better-Scroll

Dieses Mal werde ich Ihnen die Verwendung des Vue Better-Scroll-Plug-Ins ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung des Vue Better-Scroll-Plug-Ins? ist ein praktischer Fall, werfen wir einen Blick darauf.

BetterScroll gilt derzeit als das beste mobile Scrolling-Plug-in, seine Leistung ist also definitiv vorhanden. Ansonsten... haha. Persönlich finde ich es sehr nützlich. In diesem Artikel geht es nicht um BetterScroll im Allgemeinen, sondern um das Scrollen im Detail. Wenn Sie mehr darüber erfahren möchten, klicken Sie bitte hier.

Rollprinzip

Was ist besser-scrollenScrollprinzip

better-scroll ist ein Plug-in, das sich auf die Lösung der Anforderungen verschiedener Scroll-Szenarien auf dem mobilen Endgerät konzentriert (PC wird bereits unterstützt). Sein Kern basiert auf der Implementierung von iscroll. Sein API-Design ist grundsätzlich mit iscroll kompatibel, es wurden einige Funktionen erweitert und einige Leistungsoptimierungen vorgenommen.

better-scroll wird auf Basis von nativem JS implementiert und ist nicht auf ein Framework angewiesen. Die Größe des kompilierten Codes beträgt 63 KB, nach der Komprimierung 35 KB und nach gzip nur 9 KB. Es handelt sich um eine sehr leichte JS-Bibliothek.

Der grüne Teil ist der Wrapper, also der übergeordnete Container, und er hat eine feste Höhe. Der gelbe Teil ist content, das erste untergeordnete Element des übergeordneten Containers, erhöht sich seine Höhe mit der Größe des Inhalts. Dann, wenn zufrieden Die Höhe überschreitet nicht die Höhe des übergeordneten Containers und kann nicht gescrollt werden. Sobald sie die Höhe des übergeordneten Containers überschreitet, können wir im Inhaltsbereich scrollen. Das Prinzip des horizontalen Scrollens besteht darin, die feste Höhe in eine feste Breite zu ändern. (Ich werde hier nicht zu sehr ins Detail gehen)

Vertikal scrollen

Kommen wir ohne weitere Umschweife direkt zum 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>

Dies ist eine Vue BetterScroll-Demo zum vertikalen Scrollen. Hier sind zwei Punkte zu beachten.

1. Es kann nur eine Ebene des übergeordneten p geben, nämlich den Container

2. Das übergeordnete p muss auf Überlauf und Ausblenden eingestellt sein und die Höhe muss festgelegt sein

Horizontal scrollen

Beim horizontalen Scrollen muss im Vergleich zum vertikalen Scrollen die Breite des Scrollbereichs dynamisch ermittelt und der Code direkt eingegeben werden.

<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>

Seitliches Scrollen erfordert Aufmerksamkeit.

1. Es kann nur eine Ebene des übergeordneten p geben, nämlich den Container

2. Der übergeordnete Container muss das Überlaufverstecken und die feste Breite festlegen

3. Die Breite dynamisch ermitteln des Bildlaufbereichs

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum PHP-Chinesen Webseite!

Empfohlene Lektüre:

Alles auswählen und Auswahl in Vue umkehren

So erhalten Sie es, wenn Sie die Mint-Benutzeroberfläche verwenden Zeit-Plugin Wert auswählen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des Scroll-Plug-Ins für Vue Better-Scroll. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!