element無限スクロールの使い方


InfiniteScroll無限スクロールの使い方
最近もプロジェクトでこのような問題が発生しましたね.データが多すぎてページを巡るのはとても大変ですから、この無限スクロールを使ってください.そうすれば、ページカートンがユーザーの他の操作を妨げないように、私は直接コードをつけましょう.
1.スクロールが必要な箇所にロード方法loadを付ける
 <div
     class="infinite-list"
     v-infinite-scroll="load"
     style="overflow: auto; max-height: 600px;width:90%; border: 1px solid #ddd;padding:0 16px"
 >
    <div
        v-for="(item, index) in formData.fhckList"
        :key="index"
         class="infinite-list-item"
     >
       <div style="fonnt-size: 20px; font-weight: 900">
            {
     {
      item.ware_name }}
       </div>
    </div>
 </div>

2.声明は何から始まるか
data(){
     
   return{
     
      count:9
   }
}

3.方法
  //      
    load() {
     
      // console.log("             ", this.formData.fhckList);
      // console.log("   count", this.count);
      // console.log(this.tabledatas);
      this.count += 1;
      // console.log(this.tabledatas[this.count]);
      if (this.formData.fhckList.length > 0 && this.tabledatas[this.count]) {
     
        this.formData.fhckList.push(this.tabledatas[this.count]);
      }
    },

4.テーブルへのデータの取得
 //1.      
    selectData() {
     
      this.count = 9;
      if (this.formData.selecttypes) {
     
        let params = {
     
          attribute_id: this.formData.selecttypes,
          platform_id: this.formData.platform_id,
          country_id: this.formData.platform_site,
        };
        console.time();
        warewareList(params).then((res) => {
     
          res.data.data.map((row) => {
     
            row.rule_level = "0";
            row.trans_type = "0";
            row.is_guahao = "0";
            row.transTypes = [];
          });
          setTimeout(() => {
     
            // this.formData.fhckList = res.data.data;
            this.tabledatas = res.data.data;
            this.formData.fhckList = res.data.data.slice(0, 10);
          }, 1000);
          // console.log("111111111111x", this.formData.fhckList);
        });
        console.timeEnd();
      } else {
     
        this.formData.fhckList = [];
      }
    },

全体的に私の考え方はまず10本のデータをロードして、それからスクロールバーのスクロールに従って毎回表の中にpushを1本入れます.そうすれば、カートンがユーザーの使用に影響を与えません.もっと良い方法があれば、共有してもいいです.私も勉強してもいいです.