不用插件vue实现滚动加载

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

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

2，给容器绑定scroll事件

<ul class="left_li_ul" @scroll="gd_add">
              <li v-for="(item,index) in huifang_li" @click="left_li(index)" class="left_li1">
                  <div>
                      <div class="hf_username">{{item.username}}</div>
                      <div><img :src="item.sex" alt="" style="width: 20px;height: 20px;"></div>
                      <div>{{item.age}}</div>
                      <div><img :src="item.dengji" alt="" style="width: 20px;height: 20px;"></div>
                  </div>
                  <div>
                      <div>{{item.data}}</div>
                      <div class="hf_beizhu">{{item.beizhu}}</div>
                  </div>
              </li>

            </ul>

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<json.length;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<json.length;i++){
              this.huifang_li.push(json[i])
            }
          })

        },

ok就是这么简单！！