页面分页数据滚动加载

html 页面代码

<template>
      <ul class="infinite-list" v-infinite-scroll="load"  style="height: 800px;overflow:auto" infinite-scroll-distance="100">
      <article  v-for="(i,index) in articlePage.records" class="infinite-list-item"  >
        <a class="focus" href="article.html" title=""><img class="thumb" data-original="images/excerpt.jpg" src="images/excerpt.jpg" alt=""></a>
        <header><a class="cat" href="program" >{{i.label}}<i></i></a>
          <h2><a href="article.html" title="">{{i.title}}</a></h2>
        </header>
        <p class="meta">
          <time class="time"><i class="glyphicon glyphicon-time"></i> {{i.createTime}}</time>
          <span class="views"><i class="glyphicon glyphicon-eye-open"></i> 共{{i.readCnt}}人围观</span> <a class="comment" href="article.html#comment"><i class="glyphicon glyphicon-comment"></i> 0个不明物体</a></p>
        <p class="note" v-html="i.content"></p>
      </article>
      </ul>
      </template>

js 代码

<script>
  var v = new Vue({
    el:"#app",
    data:{
      page:0,
      pageSize:5,
      articlePage:{records:[]},
    },
    methods:{
      queryPage(){
        axios.get("http://127.0.0.1/c112s3zrblog/article/queryPage?page="+this.page + "&pageSize="+this.pageSize)
                .then(res=>{
                 if(res.data.length == 0){
                   this.page = -1;
                 }
                 res.data.records.forEach(v=>{
                   this.articlePage.records.push(v);
                 });
                })
      },
      load () {
        if( this.page== -1 ){
         return;
        }
        this.page += 1;
        this.queryPage();

      }
    },
    created(){
      this.load();
    }
  })

</script>