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进去一条 这样 就不会造成卡顿 不影响用户使用 如果有更好的方法 可以分享一下 我也可以学习一下