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

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

Webプロジェクトでは、データを読み込むためにプルダウンやスクロールの機能を使用することがよくあります。今日は、Vue-infinite-loadingプラグインの紹介と使い方を説明します!

ステップ1: インストール

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

ステップ2: 引用

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

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

ステップ3: 使用

1. 基本的な使い方

<テンプレート>
  <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 }
  </スクリプト>

2. ページングの使用

<テンプレート>
    <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 }
    };
</スクリプト>

説明: $state: このコンポーネントは、特別なイベント パラメータ $state をイベント ハンドラに渡して、読み込み状態を変更します。$state パラメータには、loaded メソッド、complete メソッド、reset メソッドの 3 つのメソッドが含まれます。

  • loaded メソッドは、各データのロード後にアニメーションを停止するために使用され、その後、コンポーネントは次のトリガーの準備が整います。
  • complete メソッドは無限読み込みを完了するために使用され、コンポーネントはスクロール操作を処理しなくなります。ロード時にメソッドが呼び出されない場合、このコンポーネントはユーザーに結果メッセージを表示します。そうでない場合は、それ以上のユーザーメッセージは表示されず、他のコンテンツはスロットによって設定できます。
  • リセットメソッドはコンポーネントを元の状態に戻します

3. 条件付き使用

<テンプレート>
    <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 }
    }
</スクリプト>

公式リンク: https://peachscript.github.io/vue-infinite-loading/

GitHub リンク: https://github.com/PeachScript/vue-infinite-loading

上記は、Vue のドロップダウンスクロールでデータを読み込む例の詳細です。Vue のドロップダウンスクロールでデータを読み込む詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vueはスクロールバーを記憶し、ドロップダウンの読み込みを実装するのに最適な方法です
  • Vue は歌手リストのアルファベット順ソート、ドロップダウンスクロールバー、サイドバーソートのリアルタイム更新を実装します
  • Vueはdivの垂直スクロールバーを一番下まで引っ張る方法を監視します
  • Vue は mint-ui を使用してプルダウン更新と無限スクロールのサンプルコードを実装します
  • Vue は Ajax スクロールとプルダウン読み込みを実装し、読み込み効果も備えています (推奨)
  • Vueに基づくプルダウン更新指示とスクロール更新指示
  • Vue モバイルでは、プルダウンして更新し、スライドアップして読み込みます。
  • Vue はネットワーク画像のウォーターフォール フローを実装します + プルダウンして更新 + プルアップしてさらに読み込む (詳細な手順)
  • Vueのプルダウン読み込みは実際にはそれほど複雑ではありません
  • VueScrollはモバイルデバイス上でプルダウン更新とプルアップ読み込みを実装します
  • Vue プラグイン mescroll.js は、モバイル デバイスでのプルアップ読み込みとプルダウン更新を実装します。
  • Vue モバイル端末で次のページのデータを読み込むためにプルダウンするコンポーネントをカプセル化する方法

<<:  MySQL での or ステートメントの使用例

>>:  VMware Workstation 14 Pro のインストールとアクティベーションのグラフィック チュートリアル

推薦する

挿入前にレコードが既に存在するかどうかを確認するには、SQL ステートメントを使用します。

目次SQL文を挿入する前にレコードが既に存在するかどうかを確認するSQL挿入時の判断の簡単なコレクシ...

HTML で中国語を UTF-8 に変換する方法

HTMLでは、中国語のフレーズ「學好好學」は「學好好學」と表現できます。プロジェクトでは、SMSアラ...

Docker に Zookeeper を素早くインストールする方法の詳細なチュートリアル

Docker で Zookeeper を素早くインストール会社を変わってから長らくZookeeper...

html-webpack-plugin の使用方法の詳細な説明

最近、React プロジェクトで初めてhtml-webapck-pluginプラグインを使用しました...

Reactでwindow.print()を使用した際にページが応答しなくなる問題の解決記録について

目次1. 問題の背景: 2. 問題の原因: 3. 問題解決:要約: 1. 問題の背景: window...

Linux で rc.local ファイルがない場合の完璧なソリューション

新しい Linux ディストリビューションには rc.local ファイルがなくなりました。サービス...

Facebook 出会い系サイトデザインのユーザー エクスペリエンス分析

<br />関連記事: Facebookの情報アーキテクチャの分析 元記事: http:...

Vue の計算プロパティの紹介

目次1. 計算プロパティとは何ですか? 2. 計算プロパティの構文3. 例1. 計算プロパティとは何...

CSS でインラインブロック要素間のギャップを削除するいくつかの方法の詳細な説明

最近、モバイルページを制作する際には、レイアウトにインラインブロック要素がよく使われますが、インライ...

フロントエンドが習得すべき、複数列の等高レイアウトを実現するための CSS テクニック

1. はじめにページを作成しているときに、複数列のレイアウトに遭遇することがあります。各列の内容が異...

div の高さをブラウザの高さに合わせて調整する方法

この古くからある疑問は、数え切れないほどのフロントエンド開発者やバックエンドプログラマーを悩ませてき...

Dockerコンテナ間のホスト間通信 - オーバーレイベースの実装方法

オーバーレイネットワーク分析組み込みのホスト間ネットワーク通信は、常に Docker の待望の機能で...

FirefoxでCookieとお気に入りをインポートおよびエクスポートする方法

Firefox は、多くの拡張機能とプラグインを備えた、よく使用されるブラウザです。IE に比べて多...

Linux ディスクのマウント、パーティション分割、容量拡張操作を実装する方法

基本概念操作の前に、まずいくつかの基本的な概念を理解する必要がありますディスクLinux システムで...

メニューのホバー効果を実現するCSS3

結果: html <nav id="nav-1"> <a cl...