検索
ホームページウェブフロントエンドVue.jsVue で画像やリストのスクロール読み込みを実装するにはどうすればよいですか?

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="/static/imghwm/default1.png"  data-src="image.src"  class="lazy"  : / alt="Vue で画像やリストのスクロール読み込みを実装するにはどうすればよいですか?" >
    </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 配列にプッシュします。

  1. 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 サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
フレームワークの選択:Netflixの決定を推進するものは何ですか?フレームワークの選択:Netflixの決定を推進するものは何ですか?Apr 13, 2025 am 12:05 AM

Netflixは、主に、パフォーマンス、スケーラビリティ、開発効率、エコシステム、技術的な負債、およびフレームワーク選択におけるメンテナンスコストを考慮しています。 1。パフォーマンスとスケーラビリティ:JavaとSpringbootが選択され、大規模なデータと高い同時リクエストを効率的に処理します。 2。開発効率とエコシステム:Reactを使用して、フロントエンド開発効率を向上させ、その豊富なエコシステムを利用します。 3.技術的な負債とメンテナンスコスト:node.jsを選択してマイクロサービスを構築して、メンテナンスコストと技術的債務を削減します。

Netflixのフロントエンドの反応、Vue、および未来Netflixのフロントエンドの反応、Vue、および未来Apr 12, 2025 am 12:12 AM

Netflixは、主にReactをフロントエンドフレームワークとして使用し、特定の機能のためにVUEによって補足されます。 1)Reactのコンポーネント化と仮想DOMは、Netflixアプリケーションのパフォーマンスと開発効率を向上させます。 2)VueはNetflixの内部ツールと小規模プロジェクトで使用されており、その柔軟性と使いやすさが重要です。

フロントエンドのvue.js:実際のアプリケーションと例フロントエンドのvue.js:実際のアプリケーションと例Apr 11, 2025 am 12:12 AM

Vue.jsは、複雑なユーザーインターフェイスを構築するのに適した進歩的なJavaScriptフレームワークです。 1)そのコア概念には、レスポンシブデータ、コンポーネント、仮想DOMが含まれます。 2)実際のアプリケーションでは、TODOアプリケーションを構築し、Vuerouterを統合することで実証できます。 3)デバッグするときは、vuedevtools and Console.logを使用することをお勧めします。 4)パフォーマンスの最適化は、V-IF/V-Show、リストレンダリング最適化、コンポーネントの非同期負荷などを通じて達成できます。

Vue.jsとReact:重要な違​​いを理解するVue.jsとReact:重要な違​​いを理解するApr 10, 2025 am 09:26 AM

Vue.JSは中小企業から中規模のプロジェクトに適していますが、Reactは大規模で複雑なアプリケーションにより適しています。 1。VUE.JSのレスポンシブシステムは、依存関係追跡を介してDOMを自動的に更新し、データの変更を簡単に管理できるようにします。 2.反応は一方向のデータフローを採​​用し、データは親コンポーネントから子コンポーネントに流れ、明確なデータフローと簡単な抽出構造を提供します。

Vue.js vs. React:プロジェクト固有の考慮事項Vue.js vs. React:プロジェクト固有の考慮事項Apr 09, 2025 am 12:01 AM

VUE.JSは、中小規模のプロジェクトや迅速な反復に適していますが、Reactは大規模で複雑なアプリケーションに適しています。 1)Vue.jsは使いやすく、チームが不十分な状況やプロジェクトスケールが小さい状況に適しています。 2)Reactにはより豊富なエコシステムがあり、高性能で複雑な機能的ニーズを持つプロジェクトに適しています。

Vueにタグをジャンプする方法Vueにタグをジャンプする方法Apr 08, 2025 am 09:24 AM

VUEでタグのジャンプを実装する方法には、HTMLテンプレートでAタグを使用してHREF属性を指定する方法が含まれます。 VUEルーティングのルーターリンクコンポーネントを使用します。 JavaScriptでこれを使用します。$ router.push()メソッド。パラメーターはクエリパラメーターに渡すことができ、ルートは動的ジャンプのルーターオプションで構成されています。

VUEのコンポーネントジャンプを実装する方法VUEのコンポーネントジャンプを実装する方法Apr 08, 2025 am 09:21 AM

VUEでコンポーネントジャンプを実装するための次の方法があります。Router-Linkと&lt; router-view&gt;を使用してください。ハイパーリンクジャンプを実行し、ターゲットパスとして属性を指定するコンポーネント。 &lt; router-view&gt;を使用してください現在ルーティングされているレンダリングされているコンポーネントを表示するコンポーネント。プログラマティックナビゲーションには、router.push()およびrouter.replace()メソッドを使用します。前者は歴史を保存し、後者は記録を残さずに現在のルートに取って代わります。

VueのDivにジャンプする方法VueのDivにジャンプする方法Apr 08, 2025 am 09:18 AM

VUEにDIV要素をジャンプするには、VUEルーターを使用してルーターリンクコンポーネントを追加するには、2つの方法があります。 @clickイベントリスナーを追加して、これを呼び出します。$ router.push()メソッドをジャンプします。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター