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