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 つのメソッドが含まれます。
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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
>>: VMware Workstation 14 Pro のインストールとアクティベーションのグラフィック チュートリアル
主に使用される知識ポイント: •css3 3D変換 •ネイティブjsマウスドラッグイベント•表示:グ...
序文:この記事は、jackyzm のブログ https://www.cnblogs.com/jack...
span タグのスタイルに width 属性を直接設定すると、効果がないことがわかります。 disp...
MySQL の機能: MySQL は、スウェーデンの会社 MySQL AB によって開発されたリレー...
1. 複数列レイアウトではなく、単一列レイアウトを使用する1 列のレイアウトにより、全体的な状況をよ...
システムメンテナンス中は、いつでも CPU 使用率を確認し、対応する情報に基づいてシステムの状態を分...
1 実施原則これは、DOM 要素の dragstart/ondragover/ondrop イベント...
1. セマンティゼーションとは何ですか? Bing辞書の説明セマンティクス化とは、適切な HTML ...
MySQL は強力なオープンソース データベースです。データベース駆動型アプリケーションの数が増える...
MySQL のメンテナンスを容易にするために、エラー情報を収集するためのインターフェースを提供するス...
目次序文文章1. JavaScriptコードの実行プロセスに関連する概念2. 実行コンテキストと実行...
vue+el-upload 複数ファイルの動的アップロード、参考までに具体的な内容は以下のとおりです...
この記事の例では、フルスクリーンスクロールを実現するためのjQueryの具体的なコードを参考までに共...
現在、このような要件があります。ログインした人がカスタマー サービス担当者である場合、注文は「このカ...
この記事では、テーブル切り替えプラグインを実装するためのJavaScriptのカプセル化コードを参考...