Vue でページの一番下までスクロールしてデータを無限にロードする方法

今回は、Vue でページの一番下までスクロールすることでデータの無限ロードを実装する方法を説明します。Vue でページの一番下までスクロールするときに注意する必要があることは何ですか。実際のケースですので見てみましょう。 「Vue.js で無限スクロールを実装する」という記事を見たので、かなり実践的だと思いましたので、必要な方のために簡単に翻訳してみました。 Vue の

ライフサイクル

の理解、axios リクエストをいつ開始するか、Vue でネイティブ JS を使用してスクロール イベントを記述する方法などについて理解を深めることができます。ここでは主に原文の要点を抽出して補足します

技術的な内容この記事のポイント

Vueのライフサイクル

1. Axiosの簡単な使い方

2. moment.js形式の日付

3. 画像の遅延読み込み

4. ネイティブjsと組み合わせてスクロールイベントを記述する

5. スロットリングをリクエスト

プロジェクトを作成

最初に簡単なvueプロジェクトを作成

# vue init webpack-simple infinite-scroll-vuejs

次に、プロジェクトに必要なプラグインをいくつかインストール

# npm install axios moment

ユーザーデータを初期化

プロジェクトがビルドされたら、実行して見てください

# npm run dev

http://localhost:8080 を開きます。すべてが正しくなったら、最初にユーザー データの取得を見てみましょう

<script>
import axios from 'axios'
import moment from 'moment'
export default {
 name: 'app',
 // 创建一个存放用户数据的数组
 data() {
  return {
   persons: []
  }
 },
 methods: {
  // axios请求接口获取数据
  getInitialUsers() {
   for (var i = 0; i < 5; i++) {
    axios.get(`https://randomuser.me/api/`).then(response => {
     this.persons.push(response.data.results[0])
    })
   }
  },
  formatDate(date) {
   if (date) {
    return moment(String(date)).format('MM/DD/YYYY')
   }
  },
 beforeMount() {
  // 在页面挂载前就发起请求
  this.getInitialUsers()
 }
}
</script>

また、元の作成者は、次のように注意しています。これは完全に不要であり、ページをロードするときに 5 回リクエストすることはお勧めできません。ただし、このインターフェイスは一度に 1 つしか返せないため、ここでは Mock を使用してデータをシミュレートすることもできます。詳細は説明しません~

次に、次のようにテンプレートの構造とスタイルを記述しましょう:

<template>
 <p id="app">
  <h1>Random User</h1>
  <p class="person" v-for="(person, index) in persons" :key="index">
   <p class="left">
    <img :src="person.picture.large" alt="">
   </p>
   <p class="right">
    <p>{{ person.name.first}} {{ person.name.last }}</p>
    <ul>
     <li>
      <strong>Birthday:</strong> {{ formatDate(person.dob)}}
     </li>
     <p class="text-capitalize">
      <strong>Location:</strong> {{ person.location.city}}, {{ person.location.state }}
     </p>
    </ul>
   </p>
  </p>
 </p>
</template>
<style lang="scss">
.person {
 background: #ccc;
 border-radius: 2px;
 width: 20%;
 margin: 0 auto 15px auto;
 padding: 15px;
 img {
  width: 100%;
  height: auto;
  border-radius: 2px;
 }
 p:first-child {
  text-transform: capitalize;
  font-size: 2rem;
  font-weight: 900;
 }
 .text-capitalize {
  text-transform: capitalize;
 }
}
</style>

このようにして、5人の個人情報を表示できます

無限スクロール読み込みロジックを処理します

次は。スクロールを監視するにはメソッドにscroll()を追加する必要があり、このイベントはmounted()ライフサイクル内にある必要があります。コードは次のとおりです:

<script>
 // ...
 methods: {
  // ...
  scroll(person) {
   let isLoading = false
   window.onscroll = () => {
    // 距离底部200px时加载一次
    let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 200
    if (bottomOfWindow && isLoading == false) {
     isLoading = true
     axios.get(`https://randomuser.me/api/`).then(response => {
      person.push(response.data.results[0])
      isLoading = false
     })
    }
   }
  }
 },
 mounted() {
  this.scroll(this.persons)
 }
}
</script>

このコードの元のテキストにはいくつかのスペルミスがありますので、ここで修正しました。 、また、データのロードとフローの遮断を開始するために、下からの距離を増やしました。

保存して、ブラウザに戻り、効果を確認してください〜

概要

の機能は問題ありません。ページの一番下までスクロールして無限ロードすることは、実際には通常のページ開発と同様であり、スクロールロードが完了しないたびに次のリクエストがトリガーされず、各リクエストがプッシュされます。配列内では、 の データ バインディング を介して遅延読み込みが実装されています (実際、読んだ後では、これは非常に単純だと感じます)。

最後に、これのコピーも GitHub に作成しましたので、必要な場合は、infinite-scroll-vuejs-demo をご覧ください~ この記事の事例を読んだ後は、この方法を習得したと思います。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの他の関連記事にご注目ください。

推奨書籍:

JS を使用してハフマン コーディングを実装する方法

Angular CLI を使用して Angular プロジェクトを作成する方法

以上がVue でページの一番下までスクロールしてデータを無限にロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。