element无限滚动的用法

时间：2025-03-28 13:33:18

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 "
        :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() {
      // ("懒加载打印一下要遍历的数组", );
      // ("最后的count", );
      // ();
       += 1;
      // ([]);
      if ( > 0 && []) {
        ([]);
      }
    },

4.获取到表格的数据

 //1.这个是干啥的
    selectData() {
       = 9;
      if () {
        let params = {
          attribute_id: ,
          platform_id: .platform_id,
          country_id: .platform_site,
        };
        ();
        warewareList(params).then((res) => {
          ((row) => {
            row.rule_level = "0";
            row.trans_type = "0";
            row.is_guahao = "0";
             = [];
          });
          setTimeout(() => {
            //  = ;
             = ;
             = (0, 10);
          }, 1000);
          // ("111111111111x", );
        });
        ();
      } else {
         = [];
      }
    },

总体来说 我的思路就是 先加载10条数据 然后随着滚动条的滚动每次都往表格里面push进去一条 这样 就不会造成卡顿 不影响用户使用 如果有更好的方法 可以分享一下 我也可以学习一下

相关文章