better-scroll を使用して Vue でスクロール効果を実現するための完全なガイド

Better-scroll を使用して Vue でスクロール効果を実現するための完全なガイド

プログレッシブ JavaScript フレームワークとして、Vue は当然、インターフェイスで使用する必要があるいくつかのスクロール効果を実装する必要があります。ネイティブ JavaScript とは異なり、Vue はより便利なライフ サイクルとコンポーネント化された考え方を備えており、複雑な機能を実装するにはより効率的で柔軟なスクロール プラグインも必要です。 Better-scroll は、さまざまな主流ブラウザやモバイル デバイスをサポートする強力なスクロール プラグインであり、Vue で最も人気のあるライブラリの 1 つでもあります。この記事では、better-scroll を使用して Vue のスクロール効果を実現する方法を包括的に紹介しますので、初心者の方の参考になれば幸いです。

1. 事前知識

Better-scroll を使用して Vue でスクロール効果を実現するには、主に次の側面を含むいくつかの事前知識が必要です:

1. Vue の基礎: Vue のライフサイクル、コンポーネント、データ転送などの基本概念を理解する;
2. JavaScript の基礎: 基本的な変数、関数、オブジェクト、配列、ES6 構文を理解する;
3. npm: 知るnpmのインストール方法とVueへのプラグインライブラリの導入方法。

2. better-scroll のインストールと導入

better-scroll のインストール方法は非常に簡単で、ターミナルに次のコマンドを入力するだけです。

npm install better-scroll --save

better-scrollを導入すると便利です。通常、これを導入するには 2 つの方法があります:

better-scroll をグローバルに導入する

better-scroll を main.js に導入し、Vue プロトタイプにマウントします。この場所は this.$bs を通じて呼び出されます。以下に示すように:

import Vue from 'vue'
import BScroll from 'better-scroll'
 
Vue.prototype.$bs = BScroll

better-scroll をローカルに導入する

以下に示すように、インポート ステートメントを使用して、使用する必要がある場所に better-scroll を導入します。 #

import BScroll from 'better-scroll'

3. better-scroll を使用してスクロール効果を実現します。

better-scroll をインストールして導入した後、Vue で better-scroll を使用してスクロール効果を実現できます。具体的な手順は次のとおりです。

HTML 構造

まず、以下に示すように、Vue テンプレート内でスクロールする必要がある要素構造を構築する必要があります。

<template>
  <div class="wrapper">
    <div class="content">
      <!-- 需要滚动的内容 -->
    </div>
  </div>
</template>

ここでは、wrapper を使用してコンテンツをラップし、後で、better-scroll を初期化するコンテナとして Wrapper を使用します。

CSS スタイル

次に、以下に示すように、ラッパーとコンテンツの基本スタイルを設定する必要があります。

.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
 
.content {
  position: absolute;
  top: 0;
  left: 0;
}

ここでラッパーを設定します。相対配置の場合、必要な高さと幅、および overflow:hidden 属性が設定されます。以降のスクロール操作を容易にするために、コンテンツは絶対位置に設定されます。

better-scroll の初期化

次に、次のように、Vue コンポーネントの作成されたライフサイクルで better-scroll を初期化する必要があります。 #ここでは、 this.$refs.wrapper を使用して、以前に構築されたラッパー要素を取得し、新しい this.$bs() を通じて better-scroll を初期化します。初期化の前に、スクロール方向、スクロール イベント、スクロール バーなどの関連する構成項目を 2 番目のパラメーターに渡すこともできます。

better-scroll の破棄

ページの流暢性とメモリ使用効率を確保するには、次のように、コンポーネントを破棄する前に better-scroll を手動で破棄する必要があります。

4. export default {
     data() {
       return {};
     },
     created() {
       const wrapper = this.$refs.wrapper;
       
       this.scroll = new this.$bs(wrapper, {
         // options
       });
     },
     mounted() {},
     methods: {},
     destroyed() {}
   };

ここでは、destroyed() のライフサイクルで this.scroll.destroy() を介して better-scroll を破棄します。

5. サンプル コード

最後に、読者が参照して学習できる完全なサンプル コードを示します:

export default {
  data() {
    return {};
  },
  created() {
    const wrapper = this.$refs.wrapper;
    
    this.scroll = new this.$bs(wrapper, {
      // options
    });
  },
  mounted() {},
  methods: {},
  destroyed() {
    this.scroll.destroy();
  }
};

6. 概要

渡されましたこの記事の導入部では、読者は Vue で better-scroll をインストール、導入、使用してさまざまなスクロール効果を実現する方法を学ぶことができます。同時に、さらなる開発と学習の基礎を築くために、いくつかの一般的なローリング構成項目とライフサイクル手法も学びました。この記事が読者の皆様のお役に立てれば幸いです。不備がございましたら、ご指摘いただければ幸いです。

以上がbetter-scroll を使用して Vue でスクロール効果を実現するための完全なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。