前端滚动加载数据解决办法

在不想使用分页展示数据时，全部数据使用滚动加载，来避免大量数据造成的宕机风险。

这里是在抗衰管家上使用的。应用的是vue框架。代码在admin.vue上。后端在getData。

具体代码如下：

data(){
    return {
      rs: [],
      ispc: false,
      limit: 20,
      page: 1,
      scrollfoot: '更多数据加载中……',
      nomoredata: false
    }
},

created(){
    this.ispc = window.navigator.userAgent.includes('Windows');
    if(this.ispc){
        this.getListData();
    }
  },
mounted(){
    window.addEventListener('scroll',this.throttle(this.scrollFn,3000));
  },
beforeDestroy(){
    window.removeEventListener('scroll',this.throttle(this.scrollFn,3000));
  },
methods:{
    // 主要就下面3个方法：获取数据、滚动监听、节流方法
    getListData(){
        axios.get('getData.asp',{params:{limit:this.limit,page:this.page}}).then(res=>{
          let rst = res.data;
          if(typeof rst === 'object'){
            if(rst.length<1){
              this.scrollfoot = '没有更多了';
              this.nomoredata = true;
              return ;
            }
            this.rs.push(...rst);
          }else{
            console.log('数据获取',rst);
          }
        }).catch(e=>{
          console.log('数据请求失败',e);
        });
    },
    scrollFn(){
      let winHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      let docHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
      let st = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      if(winHeight + st >= docHeight){
        if(!this.nomoredata){
          this.page++;
          console.log('触底了page',this.page);
          this.getListData();
        }
        
      }
    },
    //节流函数
    throttle(event, time){
      let timer = null
      return _=>{
          if(!timer){
              timer = setTimeout(_=>{
                  event()
                  timer = null
              }, time)
          }
      }
    }
 }

html模板上底部加标签，显示是否加载或者全部加载完成。

这个应该是比较常见的滚动加载方案。相比虚拟列表来的简单。但是数据量特大时，可能会造成前端卡顿。