如何用javascript实现分页功能

Question

假如有5个以下格式的json数据，页面首先加载page1给用户，如果content数据量等于10条，
当用户滚动到底部的时候，继续请求page2.如果page1的数据量小于10条说明page2没有内容，不进行
请求.依次类推，如果能用vue做的话就更好了
如果page1数据=10条，我如何保证滚动到可视区域底部的时候，
page2结果返回成功的时候，才能再次请求page3，而不是重复请求
//page1
{
    "msgflag":1,
    "content":[
        {"age":1},
        {"age":2},
        {"age":3},
        {"age":4},
        {"age":5},
        {"age":6},
        {"age":7},
        {"age":8},
        {"age":9},
        {"age":10},
    ]
}
//page2
{
    "msgflag":1,
    "content":[
        {"age":11},
        {"age":12},
        {"age":13},
        {"age":14},
        {"age":15},
        {"age":16},
        {"age":17},
        {"age":18},
        {"age":19},
        {"age":20},
    ]
}

<div class="header"></div>
<ul class="main">
    <li v-for="item in content">{{item.age}}</li>
</div>
<div class="footer"></div>

Answer 1

添加一个loading状态，滚动到底部时loading = true并开始加载，加载结束（成功或失败）后loading=false,
加载分页数据的方法中需要确保不在loading状态否则不加载，怕方法调用频繁可以加个debounce。