Vue を使用して無限スクロールとウォーターフォール フローのレイアウトを構築するにはどうすればよいですか?

Vue.js は、開発者が動的で応答性の高い Web アプリケーションを簡単に作成できるようにする人気の JavaScript フレームワークです。中でも、強力なコンポーネント開発機能が開発者に特に支持されています。無限スクロールとウォーターフォール レイアウトは、現代の Web 開発において不可欠な機能の 1 つになっています。

この記事の目的は、Vue.js をいくつかのサードパーティ ライブラリと組み合わせて使用​​し、無限スクロールとウォーターフォール フロー レイアウト機能を実現する方法を紹介することです。

無限スクロールの実現

無限スクロールとは、ページの下部までスクロールするときにさらに多くのコンテンツを読み込み続けて、ページ コンテンツを無限に拡大することを指します。この手法は何千ものデータ エントリに対して機能し、ユーザー エクスペリエンスを大幅に向上させることができます。

データ ソースの準備

まず、少なくともいくつかのデータ項目を含むデータ ソースを準備する必要があります。ここでは、簡単な例を使用して説明します。100 個のデータ項目を含む無限にスクロール可能なリストがあるとします。データ ソースは次のようになります:

[
  {id: 1, text: 'Item 1'},
  {id: 2, text: 'Item 2'},
  // ... more data
  {id: 99, text: 'Item 99'},
  {id: 100, text: 'Item 100'},
]

vue-infinite-scroll ライブラリをインストールして使用します

次に、vue-infinite-scroll というライブラリをインストールする必要があります。これは、無限スクロール機能の中心的なメカニズムと、必要な命令とコンポーネントを提供します。このライブラリをインストールするには、npm コマンドを使用できます:

npm install vue-infinite-scroll

必要な命令をグローバルに登録します:

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

コンポーネントでは、いくつかの構成とデータを設定する必要があります:

<template>
  <div class="scroll-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item.text }}</li>
    </ul>
    <div v-if="busy" class="loading">
      Loading ...
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      items: [], // 当前列表所有数据
      busy: false, // 标记是否正在请求数据
      page: 1, // 当前数据分页
      perPage: 10, // 每页数量
      total: 100, // 总数据量
    }
  },
  methods: {
    loadMore() {
      // 标记正在加载数据
      this.busy = true
      // 模拟请求延迟
      setTimeout(() => {
        // 构造新数据
        const newItems = []
        const from = (this.page - 1) * this.perPage + 1
        const to = this.page * this.perPage
        for (let i = from; i <= to && i <= this.total; i++) {
          newItems.push({
            id: i,
            text: 'Item ' + i
          })
        }
        // 加载新数据
        this.items = [...this.items, ...newItems]
        // 增加当前页数
        this.page++
        // 去除加载数据标记
        this.busy = false
      }, 1000)
    }
  }
}
</script>

コードの説明

• v-infinite-scroll="loadMore": より多くのデータをロードするコールバック関数を指定するために使用されます
• infinite- scroll -disabled="busy": データが現在要求されているかどうかを指定するために使用されます。
• infinite-scroll- distance="10": スクロールするピクセル数を指定するために使用されます。バーは下からです データ読み込み動作のトリガー

ウォーターフォール フロー レイアウトの実装

ウォーターフォール フロー (ウォーターフォール) は一般的なレイアウトです。その中心的な概念は、さまざまなサイズの項目を表示できることです。同じ行にある場合、ウォーターフォール フローのレイアウトはプロジェクトの数に応じて自動的に調整されます。 vue-waterfall と呼ばれる Vue サードパーティ コンポーネント ライブラリを使用すると、わずか数行のコードでウォーターフォール レイアウトを簡単に実装できます。

vue-waterfall ライブラリをインストールして使用する

まず、vue-waterfall コンポーネント ライブラリ:

npm install vue-waterfall

グローバル登録コンポーネント:

import waterfall from 'vue-waterfall'
Vue.use(waterfall)

## をインストールする必要があります。 #その後、コンポーネントでウォーターフォール フロー レイアウトを使用できます:

<template>
  <waterfall>
    <div v-for="(item, index) in items" :key="index">
      <h3>{{item.title}}</h3>
      <p>{{item.desc}}</p>
      <img :src="item.imgUrl" :alt="item.title">
    </div>
  </waterfall>
</template>
<script>
import axios from 'axios'

export default {
  data () {
    return {
      items: []
    }
  },
  created () {
    axios.get('https://api.example.com/items').then(response => {
      this.items = response.data
    })
  }
}
</script>

コードの説明

このコードは、axios ライブラリを使用してデータ ソースからデータを取得します。データの構造は大まかに次のとおりです。

[
  {
    title: 'Item 1',
    desc: 'This is item 1',
    imgUrl: 'https://example.com/item1.png',
  },
  {
    title: 'Item 2',
    desc: 'This is item 2',
    imgUrl: 'https://example.com/item2.png',
  },
  // ...
]

無限スクロールとウォーターフォール フロー レイアウトの最適化

実際、実際のアプリケーション シナリオでは、無限スクロールとウォーターフォール フロー レイアウトを扱うときによくある問題に直面します。ソースが非常に大きい場合、コンポーネントのパフォーマンスが大幅に低下し、応答が遅くなったり、遅延したりする原因になります。ここでは、コンポーネントのパフォーマンスを向上させるためのいくつかの最適化戦略を紹介します。

仮想スクロール技術の使用

仮想スクロール技術の基本的な考え方は、すべてのデータをレンダリングするのではなく、表示間隔に従ってユーザーに表示されるデータのみをレンダリングすることです。このようにして、コンポーネントのレンダリング コストを大幅に削減し、パフォーマンスを向上させることができます。 vue-virtual-scroll-list コンポーネントは、仮想スクロールを実装するための信頼できるライブラリであり、vue-infinite-scroll または vue-waterfall ライブラリと組み合わせて使用​​できます。

vue-virtual-scroll-list ライブラリをインストールします:

npm install vue-virtual-scroll-list

このライブラリを使用する場合、コンポーネントで次の変更を行う必要があります:

<template>
  <virtual-scroll-list :size="75" :remain="10" :items="items" :key-field="'id'">
    <div slot-scope="{item}">
      <h3>{{item.title}}</h3>
      <p>{{item.desc}}</p>
      <img :src="item.imgUrl" :alt="item.title">
    </div>
  </virtual-scroll-list>
</template>
<script>
import axios from 'axios'
import VirtualScrollList from 'vue-virtual-scroll-list'

export default {
  components: { VirtualScrollList },
  data () {
    return {
      items: []
    }
  },
  created () {
    axios.get('https://api.example.com/items').then(response => {
      this.items = response.data
    })
  }
}
</script>

その中で、 pass vue- 仮想スクロール効果を実現するために、ウォーターフォール コンポーネントが vue-virtual-scroll-list コンポーネントに置き換えられます。

分割読み込み

コンポーネントのレンダリングの負荷を軽減するもう 1 つの方法は、データを分割して読み込むことです。この方法は、前述の無限スクロールに似ていますが、データをロードするときに、すべてのデータを一度に取得するのではなく、セグメント化されたデータをオンデマンドでロードします。セグメント化された読み込みを実装するにはどうすればよいですか?簡単な解決策は、一度に最初の N 個のデータのみをロードし、ユーザーが一番下までスクロールした後に次のデータをロードすることです。この方法は、データ量が比較的大きい状況に適しています。

<template>
  <div class="scroll-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item.text }}</li>
    </ul>
    <div v-if="busy" class="loading">
      Loading ...
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      items: [], // 当前列表所有数据
      busy: false, // 标记是否正在请求数据
      page: 1, // 当前数据分页
      perPage: 10, // 每页数量
      total: 100, // 总数据量
    }
  },
  methods: {
    loadMore() {
      // 标记正在加载数据
      this.busy = true
      // 模拟请求延迟
      setTimeout(() => {
        // 构造新数据
        const newItems = []
        const from = (this.page - 1) * this.perPage + 1
        const to = this.page * this.perPage
        for (let i = from; i <= to && i <= this.total; i++) {
          newItems.push({
            id: i,
            text: 'Item ' + i
          })
        }
        // 加载新数据
        if (this.page <= 10) {
          this.items = [...this.items, ...newItems]
          // 增加当前页数
          this.page++
        } else {
          this.busy = true
        }
        // 去除加载数据标记
        this.busy = false
      }, 1000)
    }
  }
}
</script>

このコードでは、loadMore 関数を変更しました。データの最初の 10 ページのみがプルされるようになりました。このように、データ量が多くても段階的に読み込むことでコンポーネントへの負担を軽減できます。

概要

この記事では、Vue.js を使用して無限スクロールとウォーターフォール フロー レイアウト機能を作成する方法を紹介し、コンポーネントのパフォーマンスを向上させるための最適化策も実装しました。一般的に、vue-infinite-scroll、vue-waterfall、および vue-virtual-scroll-list の 3 つのライブラリで作業を完了するには十分ですが、実際の開発では、さまざまなシナリオとさまざまなデータ構造も考慮する必要があります。現在のプロジェクトに最適なソリューション。

以上がVue を使用して無限スクロールとウォーターフォール フローのレイアウトを構築するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。