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

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