不用插件vue实现滚动加载

关键所在是实现滚动到底部，然后进行post请求，然后将获得的分页的数据push到数组中

1，在data中定义三个变量page,isadd,data_wrpa其中page是控制分页的，isadd是控制是否post的，data_wrpa是数据的容器

2，给容器绑定scroll事件

             
• 
                   
  
                       

  {{item.username}}

  
                       

  
                       

  {{item.age}}

  
                       

  
                   
  
                   
  
                       

  {{item.data}}

  
                       

  {{item.beizhu}}

  
                   
  
               



           

3.在methods中写这个方法

gd_add(){
            let wrap_height=$('.left_li_ul').height();  //容器的高度
            let scroll_top=$('.left_li_ul').scrollTop();   //滚动条的scrolltop
            let scroll_height=$('.left_li_ul').prop('scrollHeight');  //内容的高度
            let is_height=scroll_height-wrap_height-scroll_top-125   //判断是否为0，既是否到了底部（这里的-125是因为我定了个padding-bottom=125,所以要减掉）
            if (is_height==0&&this.isadd) {
              this.page++;
              this.isadd=false;
              $.post('',{page:this.page},function(json){   //具体怎么处理数据自行解决吧，情况不一样
                for(let i=0;i                  this.huifang_li.push(json[i])
                }
              })
              console.log(this.page)
            }

          },

4，注意初始的时候需要渲染page=0的数据，所以在mounted钩子函数中先请求一下数据并渲染

mounted(){
          $.post('',{page:this.page},function(json){
            for(let i=0;i              this.huifang_li.push(json[i])
            }
          })

        },

ok就是这么简单！！