vue2.0实现上拉加载

Question

有这样一个需求，首先请main初始化的时候通过接口加载数据，第一次请求的参数为indexPage:1(每一页最多10条数据)

当用户滚动列表到底部的时候，判断第一次加载的数据有没有10条，如果没有表示没有更多数据了，如果有10条则继续请求pageIndex2，依此类推

<header>头部</header>
<div class="main">
    <ul>
        <li v-for="item in items"></li>
    </ul>
</div>
<footer>底部</footer>

<script>
    var main = new Vue({
        el:main,
        data:{items:""}
        created:function(){
          this,getlist()
        },
        methods:{
          getlist:function() {
            this.$http({
              url:api,
              method:"GET",
              params:{pageIndex:1},
              headers:{
                'Content-Type': 'appliaction/json'
              }
            }).then(function(res){this.items = res.body.questionlist},function(err){console.log(err)})
          }
        }
    })

</script>

下面是我的思路

滚动条滚到底部的时候判断第一次加载的数据有没有10条，如果没有则在控制台显示没有更多数据，有则继续请求pageIndex2，写到这里发现思路错了当请求pageindex2，下一次的items数量肯定大于10了。求大神给出更好的写法
或者有没有什么简单的插件
$(window).scroll(function(){
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {  
       if(main.$data.items.<=10){
           console.log("没有更多数据")
       }else{
           //这里不会写了
       }
    }
});

Answer 1

vue-infinite-loading

Answer 2

可以看看这个组件 better-scroll

Answer 3

mint-ui pull down和 pull up

Answer 4

简单的上拉需求, 建议自己写一个组件, 判断滚动条到底部了, 是否加载数据就行了