Vue スクロールダウンしてさらにデータを読み込む スクロールケースの詳細な説明

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

'vue-infinite-scroll' から infiniteScroll をインポートします。
Vue.use(無限スクロール)

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <div v-for="データ内のアイテム" :key="item.index">{{item.name}}</div>
</div>

 データ （） {
    戻る {
      カウント: 0,
      データ： []、
      忙しい: false
    }
  }

メソッド: {
    ロードモア: 関数() {
      this.busy = true
      タイムアウトを設定する(() => {
        (var i = 0, j = 10; i < j; i++) の場合 {
          this.data.push({name: this.count++ })
        }
        コンソールログ(このデータ)
        this.busy = false
      }, 1000)
    }
  }

 タイムアウトを設定する(() => {
        (var i = 0, j = 10; i < j; i++) の場合 {
          this.data.push({name: this.count++ })
        }
        コンソールログ(このデータ)
        this.busy = false
      }, 1000)

npm インストール vue-scroller -d

'vue-scroller' から VueScroller をインポートします
Vue.use(VueScroller)

<スクロールスタイル="top: 100px;" :height='400' :on-refresh="refresh" :on-infinite="infinite" ref="myscroller">
     <div class="order-box" v-for="(item,index) in orderList" :key="index">
                
     </div>
 </スクロール>

データ（）{
           戻る {
                ステータス: 'すべて',
                順序リスト:[],
                ページ:0,
                全ページ:1,
            }
        },

更新（完了）{
                タイムアウトを設定します(()=>{
                    終わり（）;
                },1500)
            },

// プルダウンして無限をトリガーする (完了) {
                if(this.page>=this.all_page){
                    タイムアウトを設定します(()=>{
                        this.$refs.myscroller.finishInfinite(true);
                    },1500)
                }それ以外{
                    
                    タイムアウトを設定します(()=>{
                        this.page++;
                        this.getorderList(完了)
                        
                    },500);
                }
            },
 
getorderList(完了){
                this.$http({
                    メソッド:'post',
                    url:'/seckill/server/orderList',
                    データ：{
                        jwt:this.jwt、
                        ステータス:このステータス、
                        ページ:このページ、
                        ページサイズ:5
                    }
                }).then(res=>{
                    （res.data.code == 0）の場合{
                        
                        
                        this.orderList.push.apply(this.orderList、res.data.data.list) を実行します。
                        this.$refs.myscroller.finishInfinite(true)
 
                        this.page = res.data.data.page
                        this.all_page = res.data.data.all_page
                        終わり（）;
                    }それ以外{
                       
                    }
                })
            },

すべて(){
                this.status = 'すべて'
                このページ = 0
                this.all_page = 1
                this.$refs.myscroller.finishInfinite(false);
                this.orderList = []
            },

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

// コンポーネントクラスは import InfiniteLoading from 'vue-infinite-loading' を使用します。
 
エクスポートデフォルト{
  コンポーネント: { InfiniteLoading }
}
 
//基本バージョンを使用する <infinite-loading
  スピナー="スパイラル"
  @infinite="無限ハンドラー"
  :距離="200"
  クラス="無限読み込みラップ"
>
  <!-- <div slot="spinner">読み込み中...</div> -->
  <div slot="no-more">データがありません</div>
  <div slot="no-results">結果データなし</div>
  <!-- <div slot="error" slot-scope="{トリガー}">
	エラーデータ。再試行するには、<a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="trigger">ここ</a>をクリックしてください。
  </div> -->
</無限読み込み>

<テンプレート>
  <div>　
		    <p v-for="(item,index) リスト内" :key="index">　
			     <span v-text="アイテム"></span>　
		    </p>　
		    <!-- 無限読み込みコンポーネントは、スクロール ボックス内のリストの下部に配置する必要があります。 -->
		<無限読み込み
			スピナー="スパイラル"
			@infinite="無限ハンドラー"
			:識別子="無限ID"
			:距離="200"
			クラス="無限読み込みラップ"
		>
			<div slot="spinner">読み込み中...</div>
			<div slot="no-more">データがありません</div>
			<div slot="no-results">結果データなし</div>
			<div slot="エラー" slot-scope="{トリガー}">
			  エラーデータ。再試行するには、<a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="trigger">ここ</a>をクリックしてください。
			</div>
		</無限読み込み>　
	 </div>
</テンプレート>
 
<スクリプト>　
 'vue-infinite-loading' から InfiniteLoading をインポートします。
  エクスポートデフォルト{
    データ（） {
      戻る {
		  infiniteId: +new Date(), // スクロール状態の変更をリセット page: 1,
        リスト: []
      };
    },
    メソッド: {
		// スクロール状態をリセットする rest(){
		  このリスト = [];
		  このページは 1 です。
		  this.infiniteId += 1;
		},
      非同期無限ハンドラ($state) {
			// リクエストデータをシミュレートします。const res = await this.$axios.workList({ page: this.page, pagesize: 20 });
			  (res.data.list.length) の場合 {
				このページ += 1;
				this.list = this.list.concat(res.data.list);
				$state.loaded();
			  } それ以外 {
				$state.complete();
			  }
        // ここでは1秒の読み込み遅延をシミュレートします //setTimeout(() => {
         // temp = [] とします。
         // (let 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) {
      let 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 }
    }
</スクリプト>

import { debounce } from "lodash"; // 手ぶれ防止 // 手ぶれ防止 get: debounce(async function () {
  k = this.$axios.getList_API() を待機します。
  console.log(k, "手ぶれ補正バージョン");
}, 1000),