如何用javascript实现分页功能

技术问答 2023-11-17 22:26:00

假如有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},
    ]
}



  • {{item.age}}

添加一个loading状态,滚动到底部时loading = true并开始加载,加载结束(成功或失败)后loading=false,加载分页数据的方法中需要确保不在loading状态否则不加载,怕方法调用频繁可以加个debounce。
声明:该文观点仅代表作者本人,必看呐发布平台,仅提供信息存储空间服务。