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 のインストールとアクティベーションのグラフィック チュートリアル

推薦する

CSS3 はドラッグ可能なルービックキューブの 3D 効果を実現します

主に使用される知識ポイント: •css3 3D変換 •ネイティブjsマウスドラッグイベント•表示:グ...

Alibaba Cloud CentOS7 サーバーの nginx 構成と FAQ の分析

序文:この記事は、jackyzm のブログ https://www.cnblogs.com/jack...

spanタグのスタイルに幅属性を設定する方法

span タグのスタイルに width 属性を直接設定すると、効果がないことがわかります。 disp...

MySQL 5.7.17 のインストールと設定のグラフィックチュートリアル

MySQL の機能: MySQL は、スウェーデンの会社 MySQL AB によって開発されたリレー...

優れたユーザー インターフェース デザインのための 37 のヒント (画像付き)

1. 複数列レイアウトではなく、単一列レイアウトを使用する1 列のレイアウトにより、全体的な状況をよ...

CPU、マシンモデル、メモリなどの情報を表示するLinuxシステム

システムメンテナンス中は、いつでも CPU 使用率を確認し、対応する情報に基づいてシステムの状態を分...

JavaScript を使用して div の位置をドラッグして入れ替える例

1 実施原則これは、DOM 要素の dragstart/ondragover/ondrop イベント...

HTMLのセマンティクスといくつかの簡単な最適化についての簡単な説明

1. セマンティゼーションとは何ですか? Bing辞書の説明セマンティクス化とは、適切な HTML ...

MySQL のデバッグと最適化に関する 101 のヒントを共有する

MySQL は強力なオープンソース データベースです。データベース駆動型アプリケーションの数が増える...

grep を使用して MySQL エラー ログ情報を取得する方法の詳細な説明

MySQL のメンテナンスを容易にするために、エラー情報を収集するためのインターフェースを提供するス...

js 実行コンテキストとスコープの概要

目次序文文章1. JavaScriptコードの実行プロセスに関連する概念2. 実行コンテキストと実行...

vue+el-upload は複数ファイルの動的アップロードを実現します

vue+el-upload 複数ファイルの動的アップロード、参考までに具体的な内容は以下のとおりです...

jQueryでフルスクリーンスクロール効果を実現

この記事の例では、フルスクリーンスクロールを実現するためのjQueryの具体的なコードを参考までに共...

SQL 文で OR と AND を混在させる場合のヒント

現在、このような要件があります。ログインした人がカスタマー サービス担当者である場合、注文は「このカ...

テーブル切り替えのための JavaScript プラグインのカプセル化

この記事では、テーブル切り替えプラグインを実装するためのJavaScriptのカプセル化コードを参考...