Vueはプルダウンとスクロールでデータを読み込む例を実装しています

npm インストール vue-infinite-loading --save

'vue-infinite-loading' から InfiniteLoading をインポートします。

エクスポートデフォルト{
  コンポーネント: { InfiniteLoading }
}

<テンプレート>
  <div> <p v-for="item in list"> <span v-text="item"></span> </p> <!-- 無限読み込みコンポーネントは、スクロール ボックス内のリストの下部に配置する必要があります。 --> <infinite-loading @infinite="infiniteHandler"></infinite-loading> </div></template><script> 'vue-infinite-loading' から InfiniteLoading をインポートします。

  エクスポートデフォルト{
    データ（） {
      戻る {
        リスト: []
      };
    },
    メソッド: {
      無限ハンドラ($state) {
        // ここでは1秒の読み込み遅延をシミュレートします setTimeout(() => {
          temp = [] とします。
          (i = this.list.length + 1、i <= this.list.length + 20、i++ とします) {
            temp.push(i);
          }
          this.list = this.list.concat(temp);
          $state.loaded();
        }, 1000);
      },
    },
    コンポーネント: { InfiniteLoading }
  </スクリプト>

<テンプレート>
    <div>
          <ul>
              <li class="hacker-news-item" v-for="(item, key) in list"></li>
        </ul>
        <無限ロード @infinite="infiniteHandler">
            データはもうありません
        </無限読み込み>
    </div>
</テンプレート>    

<スクリプト>
    'vue-infinite-loading' から InfiniteLoading をインポートします。
    'axios' から axios をインポートします。

    エクスポートデフォルト{
          データ（） {
            戻る {
                  リスト: []
            };
          },
          メソッド: {
            無限ハンドラ($state) {
                api="http://xxx.com/xxx" とします。
                //api はデータアドレスを要求します axios.get(api, {
                    パラメータ: {
                        // ページ番号パラメータ（ページあたり 10 個）
                          ページ: this.list.length / 10 + 1、
                    },
                  }).then((応答) => {
                    if (応答データの長さ) {
                        // response.data はリクエスト インターフェイスによって返される配列リストです。this.list = this.list.concat(response.data);
                          $state.loaded();
                          (this.list.length / 10 === 10)の場合{
                              // ここでは 10 ページのデータが読み込まれ、これ以上読み込まれないように設定されています $state.complete(); 
                          }
                    } それ以外 {
                          $state.complete();
                    }
                  });
            }
          },
          コンポーネント: { InfiniteLoading }
    };
</スクリプト>

<テンプレート>
    <div class="ハッカーニュースリスト">
          <div class="ハッカーニュースヘッダー">
            <!-- プルダウンして変更 -->
            <v-model="タグ" @change="changeFilter()">を選択します。
                  <option value="story">ストーリー</option>
                  <option value="history">履歴</option>
            </選択>
              <!--またはクリックして変更-->
            <button @click="changeFilter()">検索</button>
          </div>
          <ul>
              <li class="hacker-news-item" v-for="(item, key) in list"></li>
           </ul>
           <!--ref="infiniteLoading" を設定することを忘れないでください -->
          <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading">
            これ以上のデータはありません
          </無限読み込み>
    </div>
</テンプレート>

<スクリプト>
    'vue-infinite-loading' から InfiniteLoading をインポートします。
    'axios' から axios をインポートします。

    エクスポートデフォルト{
          データ（） {
            戻る {
                  リスト: [],
                  タグ: 'ストーリー',
            };
          },
          メソッド: {
            無限ハンドラ($state) {
                  定数api="http://xxx.com/xxx";
                  //api はデータアドレスを要求します axios.get(api, {   
                    パラメータ: {
                        // 変更された条件パラメータタグ: this.tag,  
                          ページ: this.list.length / 10 + 1、
                    },
                  }).then(({ データ }) => {
                    if (データ結果の長さ) {
                          this.list = this.list.concat(data.result);
                          $state.loaded();
                          (this.list.length / 20 === 10)の場合{
                            状態.complete();
                          }
                    } それ以外 {
                          $state.complete();
                    }
                  });
            },
            //このメソッドを使用して条件バーを変更します changeFilter() {
                  このリスト = [];
                  this.$nextTick(() => {
                    this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset');
                  });
            },
          },
          コンポーネント: { InfiniteLoading }
    }
</スクリプト>