Vue で画像やリストのスクロール読み込みを実装するにはどうすればよいですか?

Web アプリケーションがますます複雑になるにつれて、ページ上に多数の画像やリストを表示する必要が生じることがよくあります。すべてのコンテンツを一度に読み込むと、ページの読み込み速度とユーザー エクスペリエンスに大きな影響を与えます。この場合、スクロール読み込みが非常に一般的な方法になっています。

ローリング ローディングは、無限スクロールとも呼ばれ、ユーザーがページをスクロールしたときに、AJAX テクノロジを通じてリアルタイムで後続のデータを要求するプロセスを指します。このテクノロジーは、効率的なエクスペリエンスを実現するために、Facebook、Twitter、Instagram などのソーシャル メディア サイトで広く使用されています。

Vue.js では、通常、ローリング読み込みを実装する方法が 2 つあります。1 つは自分でコードを記述する方法、もう 1 つはサードパーティのプラグインを使用する方法です。それでは一つずつご紹介していきます。

1. ローリング ローディングを実装する独自のコードを作成する

Vue.js には、ページのスクロール イベントを監視するために使用できる非常に便利な命令 v-scroll が用意されています。スクロール時に div 要素のscrollTop距離が一番下に達するかどうかを判断することができ、一番下に達すると後続のデータリクエストがトリガーされます。

次は、v-scroll を使用して画像のスクロール読み込みを実装するサンプル コードです:

<template>
  <div class="image-list" v-scroll="onScroll">
    <div class="image" v-for="image in images" :key="image.id">
      <img :src="image.src" />
    </div>
    <div v-if="loading">加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [],
      loading: false,
      page: 1,
      pageSize: 10
    }
  },

  mounted() {
    this.loadImages()
  },

  methods: {
    loadImages() {
      this.loading = true
      // 模拟请求数据，每次请求 10 条数据
      setTimeout(() => {
        let start = (this.page - 1) * this.pageSize
        let end = start + this.pageSize
        for (let i = start; i < end; i++) {
          this.images.push({
            id: i,
            src: `http://www.example.com/images/${i}.jpg`
          })
        }
        this.loading = false
        this.page++
      }, 1000)
    },

    onScroll(e) {
      // 获取 div 元素的 scrollTop 和 clientHeight
      let scrollTop = e.target.scrollTop
      let clientHeight = e.target.clientHeight
      let scrollHeight = e.target.scrollHeight
      // 比较 scrollTop + clientHeight 和 scrollHeight
      if (scrollTop + clientHeight >= scrollHeight) {
        this.loadImages()
      }
    }
  }
}
</script>

この例では、v-scroll を使用して div 要素のスクロール イベントをリッスンします。 、および onScroll メソッドで、底に達したかどうかを判断します。底に達した場合、loadImages メソッドがトリガーされます。このメソッドは、データの非同期リクエストをシミュレートし、データを画像配列にプッシュします。さらに、ユーザー エクスペリエンスを向上させるために、データがリアルタイムで読み込まれていることを示す読み込み変数を追加しました。

2. サードパーティのプラグインを使用してローリング ロードを実装する

ローリング ロードを実装するコードを自分で作成することに加えて、いくつかのサードパーティのプラグインを使用してローリング ロードを実装することもできます。ロード中。ここでは、よく使用される 2 つのプラグイン、vue-infinite-scroll と vue-virtual-scroll-list を紹介します。

1. vue-infinite-scroll プラグイン

vue-infinite-scroll は、Vue.js に基づく無限スクロール プラグインで、スクロールの実装に役立ちます。リスト、写真、その他のシーンを読み込みます。このプラグインの使用方法は非常に簡単で、ローリング ロードを実装する必要があるコンポーネントに v-infinite-scroll ディレクティブを追加し、ローリング ロードをトリガーする必要があるメソッドを指定するだけです。

以下は、vue-infinite-scroll プラグインを使用してローリング ロード リストを実装するサンプル コードです:

<template>
  <div class="list" v-infinite-scroll="loadMore">
    <div class="item" v-for="(item, index) in items" :key="index">
      {{ item.text }}
    </div>
  </div>
</template>

<script>
import InfiniteScroll from 'vue-infinite-scroll'

export default {
  mixins: [InfiniteScroll],

  data() {
    return {
      items: []
    }
  },

  methods: {
    loadMore() {
      // 模拟异步请求数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.items.push({ text: `Item ${this.items.length + 1}` })
        }
      }, 1000)
    }
  }
}
</script>

この例では、最初に vue-infinite-scroll をインストールしました。 npm 経由でプラグインを取得し、それをコンポーネントに導入します。次に、ミックスインを使用して、起動可能な無限スクロール イベントを自動的に作成する Vue インスタンスを現在のコンポーネントにミックスします。最後に、v-infinite-scroll ディレクティブでloadMore メソッドを指定します。これは、データの非同期リクエストをシミュレートし、データを items 配列にプッシュします。

2. vue-virtual-scroll-list プラグイン

vue-virtual-scroll-list は、Vue.js に基づく仮想スクロール プラグインです。ページのパフォーマンスとユーザー エクスペリエンスを向上させるために、大量のデータのリスト スクロールを実装します。従来のスクロール読み込みとは異なり、vue-virtual-scroll-list は仮想スクロール テクノロジーを使用して、現在表示されている領域内のデータ項目のみをレンダリングするため、大量の DOM レンダリングと再配置が回避され、ページの効率と滑らかさが向上します。 。

以下は、vue-virtual-scroll-list プラグインを使用してスクロール読み込みリストを実装するサンプル コードです:

<template>
  <virtual-list
    :size="50"
    :remain="10"
    :data-key="'id'"
    :data-sources="items"
    :data-component="$options.components.item"
    @load="loadMore"
  >
  </virtual-list>
</template>

<script>
import VirtualList from 'vue-virtual-scroll-list'
import Item from './Item.vue'

export default {
  components: { Item },

  data() {
    return {
      items: []
    }
  },

  methods: {
    loadMore(start, end) {
      // 模拟异步请求数据
      setTimeout(() => {
        let count = end - start
        for (let i = 0; i < count; i++) {
          this.items.push({ id: this.items.length + 1, text: `Item ${this.items.length + 1}` })
        }
      }, 1000)
    }
  }
}
</script>

この例では、最初に vue-virtual-scroll-list をインストールしました。 npm list プラグインをスクロールしてコンポーネントに導入します。次に、テンプレートで c0df1f6f7c954331398e92f8aa71518e コンポーネントを使用します。このコンポーネントは、サイズ、残り、データキー、データソース、データコンポーネントなどのパラメーターを受け入れます。

このうち、size パラメータは各データ項目の高さを指定し、remain パラメータはプリレンダリングの回数を指定し、data-key は各データ項目を一意に識別するために使用されるフィールドを指定し、data-sources はデータ項目を指定します。必要なレンダリング データ リスト。data-component はデータ項目のレンダリング コンポーネントを指定します。最後に、load イベントでデータを非同期に要求するロジックを実行します。

結論

上記の紹介を通じて、Vue.js で画像やリストのスクロール読み込みを実装する方法はたくさんあることがわかりました。自分でコードを書くのは柔軟ですが、必要なコード量が多く、ある程度の時間とエネルギーが必要です サードパーティのプラグインを使用するのは簡単ですが、プラグインの原理や使用法についての深い理解が必要ですビジネスをより良く発展させるために。したがって、ローリング ローディングを実装する場合は、特定のビジネス シナリオと自社の強みに基づいて、適切な方法を選択する必要があります。

以上がVue で画像やリストのスクロール読み込みを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。