Verwendung des Better-Scroll-Plug-Ins in Vue

In diesem Artikel wird hauptsächlich die detaillierte Erklärung zur Fehlerbehebung für das Vue Better-Scroll-Plug-In vorgestellt. Jetzt teile ich es mit Ihnen und gebe Ihnen eine Referenz.

BetterScroll gilt derzeit als das beste mobile Scrolling-Plug-in, daher ist seine Leistung definitiv da. 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.

Scroll-Prinzip

Was ist besser-scrollenScroll-Prinzip

besser- 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. Das 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 die Hülle, der übergeordnete Container, und er wird eine feste Höhe haben. Der gelbe Teil ist der Inhalt, der das erste untergeordnete Element des übergeordneten Containers ist. Seine Höhe nimmt mit der Größe des Inhalts zu. Wenn die Höhe des Inhalts die Höhe des übergeordneten Containers nicht überschreitet, kann er nicht gescrollt werden. Sobald er 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. (Keine weitere Ausführlichkeit hier)

Vertikales 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 &#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>

Dies ist eine vertikale Scrolling-Demo von Vue BetterScroll. 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 Überlaufversteckung eingestellt sein und haben eine feste Höhe

Horizontales Scrollen

Horizontales Scrollen muss die Breite des Scrollbereichs dynamisch und direkt ermitteln Code eingeben.

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

Horizontales Scrollen erfordert Aufmerksamkeit.

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

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

3. Dynamisch die Breite des Bildlaufbereichs ermitteln

Aufgrund der Anforderungen eines kürzlich durchgeführten Projekts habe ich viele Informationen aus dem Internet überprüft, konnte dies aber tun mein Problem nicht lösen. Die offizielle Website von BetterScroll bietet keine tatsächliche Demo-Referenz, daher habe ich meine Pause genutzt, um diesen Artikel zu schreiben. Ich hoffe, es ist nützlich für Sie. Wenn Sie eine bestimmte Demo benötigen, verschieben Sie sie bitte hierher und vergessen Sie nicht, ihr einen Stern zu geben. Das Schreiben von Artikeln ist nicht einfach, also geben Sie ihr ein „Gefällt mir“!

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Wie integriere ich Vue in JQuery/Bootstrap-Projekte?

Über die Verwendung von vue-fontawesome in vue.js

Verwenden Sie JS, um dem Knoten neue Elemente hinzuzufügen

Das obige ist der detaillierte Inhalt vonVerwendung des Better-Scroll-Plug-Ins in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!