スライド ページの下部にデータを無制限にロードするという要件を設ける方法

今回はスクロールページ下部のデータを無制限にロードする条件を作る方法と、スクロールページ下部のデータを無限ロードする方法の注意点を紹介します。実際のケースを見てみましょう。

「Vue.js で無限スクロールを実装する」という記事を見たので、かなり実践的だと思いましたので、必要な方のために簡単に翻訳してみました。 Vue のライフサイクル、axios リクエストをいつ開始するか、Vue でネイティブ js を使用してスクロール イベントを記述する方法などについての理解を深めることができます。ここでは主に原文の要点を抜粋して補足します

この記事の内容

Vueのライフサイクル
axios 簡単な使い方
moment.js形式の日付
画像の遅延読み込み
ネイティブjsと組み合わせてスクロールイベントを書き込む
スロットリングのリクエスト

プロジェクトの作成

最初にSimple 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>

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

それを保存し、ブラウザに戻って効果を確認してください。問題ありません~

概要

の機能です。ページの一番下までスクロールし、無限ロードが Vue に実装されています。これは、通常のページ開発と同様であり、スクロールのロードが完了しないたびに、次のリクエストはトリガーされず、それぞれのリクエストが配列にプッシュされて渡されます。 のデータ バインディングは遅延読み込みを実装します (実際には、これにはあまり同意しません...)。これを読んだ後は、非常に簡単に理解できたと思います。この記事の事例を読んでから、さらに興味深い方法については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vueの計算プロパティとリスナーの実践的なプロジェクトの詳細な説明

モバイル端末でプルアップとスライドダウンのリフレッシュロードを行う方法

以上がスライド ページの下部にデータを無制限にロードするという要件を設ける方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。