Vue はページの一番下までプルダウンし、すぐにデータをロードします

今回はVueの注意点を紹介します。以下は、ページの一番下にプルダウンするとすぐにデータをロードするための実践的なケースです。

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

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

1. Vueのライフサイクル

2. axiosの簡単な使い方

3. moment.js形式の日付

4. 画像の遅延読み込み

5. ネイティブjsでスクロールを書き込むイベント

6. スロットルのリクエスト

プロジェクトの作成

まず簡単な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 つのデータしか返せません。もちろん、これはテストにのみ使用されます。そのため、これは行いません。詳細に進みます~

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

<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>

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

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

概要

。ページの下部へのスクロールは実際には Vue で実装されており、各スクロールのロードは完了せず、各リクエストは配列にプッシュされます。 の データ バインディング (実際には 0 0、私はあまり同意しません...) を読むと、非常に簡単に感じられます。

をマスターできたと思います。この記事の事例を読んだ後、さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue-cli3.0構成の詳細な説明

Angular CLIによるAngularプロジェクトの作成手順の詳細な説明

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