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

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

王林

リリース： 2023-06-25 15:40:40

オリジナル

3274 人が閲覧しました

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 を紹介します。

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 配列にプッシュします。

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 プラグインをスクロールしてコンポーネントに導入します。次に、テンプレートでコンポーネントを使用します。このコンポーネントは、サイズ、残り、データキー、データソース、データコンポーネントなどのパラメーターを受け入れます。

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

結論

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

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