Vue でのスクロール改善プラグインの使用

この記事では主に、vue better-scroll スクロール プラグインのトラブルシューティングの詳細な説明を紹介し、参考にさせていただきます。

BetterScroll は現時点で最高のモバイル スクロール プラグインとして知られており、その威力は間違いなくあります。そうでなければ…ははは。個人的にはとても便利だと感じています。この記事は BetterScroll 全般に関するものではなく、スクロールについて詳しく知りたい場合は、こちらを参照してください。

スクロール原理

better-scroll スクロール原理

better-scrollとは、モバイル側でのさまざまなスクロールシナリオのニーズを解決することに焦点を当てたプラグインです（PCはサポートされています） 。そのコアは iscroll の実装に基づいており、その API 設計は基本的に iscroll と互換性があり、いくつかの機能が拡張され、パフォーマンスが最適化されています。

better-scroll はネイティブ JS に基づいて実装されており、フレームワークには依存しません。コンパイルされたコード サイズは 63 kb、圧縮後は 35 kb、gzip 後はわずか 9 kb で、非常に軽量な JS ライブラリです。

緑色の部分はラッパーであり、親コンテナーです。高さが固定されています。黄色の部分はコンテンツで、親コンテナの最初の子要素です。コンテンツのサイズに応じて高さが増加します。そして、コンテンツの高さが親コンテナの高さを超えない場合はスクロールできませんが、親コンテナの高さを超えるとコンテンツ領域をスクロールできるようになります。水平スクロールの原理は、固定高さを固定幅に変更することです。 (ここではこれ以上冗長ではありません)

垂直スクロール

これ以上の苦労はせずに、コードに直接進みましょう。

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

これは Vue BetterScroll の垂直スクロールのデモです。ここで注意すべき点が 2 つあります。

1. 親 p のレイヤーはコンテナーである 1 つのみであることができます

2. 親 p はオーバーフローの非表示と固定高さを設定する必要があります

水平スクロール

水平スクロールは、垂直スクロール スクロール領域の幅を取得するには、コードに直接移動します。

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

横スクロールには注意が必要です。

1. 親 p のレイヤーはコンテナーである 1 つだけ存在できます

2. 親コンテナーはオーバーフローの非表示と固定幅を設定する必要があります

3. スクロール領域の幅を動的に取得します

最近のプロジェクトのニーズをインターネットから入手しました。多くの情報を調べましたが、まだ問題を解決できません。 BetterScroll 公式 Web サイトでは実際のデモのリファレンスが提供されていないため、休憩を利用してこの記事を書きました。お役に立てば幸いです。特定のデモが必要な場合は、ここに移動して、記事を書くのは簡単ではないので、「いいね！」を付けることを忘れないでください。

上記は私があなたのためにまとめたものです。

関連記事:

vue を jquery/bootstrap プロジェクトに統合するには?

vue.jsでのvue-fontawesomeの使用について

JSを使用してノードに新しい要素を追加します

以上がVue でのスクロール改善プラグインの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。