如何用javascript實現(xiàn)分頁功能

假如有5個以下格式的json數(shù)據(jù)，頁面首先加載page1給用戶，如果content數(shù)據(jù)量等于10條，
當(dāng)用戶滾動到底部的時候，繼續(xù)請求page2.如果page1的數(shù)據(jù)量小于10條說明page2沒有內(nèi)容，不進行
請求.依次類推，如果能用vue做的話就更好了
如果page1數(shù)據(jù)=10條，我如何保證滾動到可視區(qū)域底部的時候，
page2結(jié)果返回成功的時候，才能再次請求page3，而不是重復(fù)請求
//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>