如何用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>