上拉数据加载

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了上拉数据加载相关的知识，希望对你有一定的参考价值。

上拉数据加载

最近项目中需要对大量数据进行处理，鉴于项目是移动端项目，就采用类似于懒加载的上拉加载进行数据处理。

网上也找了很多插件，最后感觉挺繁琐，干脆自己走了一个简单的逻辑进行处理，话不多说，贴代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>上拉加载数据测试</title>
    <meta name="viewport" content="width=device-width">
    <style>
        .cont p{
            height: 200px;
            line-height: 200px;
            font-size: 26px;
            text-align: center;
            width: 100%;
            border-bottom: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div class="cont">
    <p>第1页</p>
    <p>第2页</p>
    <p>第3页</p>
    <p>第4页</p>
    <p>第5页</p>
    <p>第6页</p>
    <p>第7页</p>
    <p>第8页</p>
    <p>第9页</p>
    <p>第10页</p>
</div>
</body>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    loadData();
    function loadData(){
        var range = 50,maxpage = 5,page = 1,totalHeight=0;
        $(window).scroll(function(){
            var scrollHeight = $(window).scrollTop();//页面卷起的高度
            totalHeight = parseFloat($(window).height())+parseFloat(scrollHeight);//页面文档高度+页面卷起的高度页面卷起的高度
            if(($(document).height()-range) <= totalHeight && page != maxpage){
                $(‘.cont‘).append(‘<p>增添条数</p>‘);
                page++;
            }
        })
    }
    /*实际项目中maxPage并不是前端进行写死的值，这里只是一个简单的demo，实际中前端实现上拉加载对于后台来说是分页功能实现。
    * 因此实际中最大页码数应该是由后台进行返回的
    * range是元素底部距离可视区高度差值，保证了用户在上拉加载的时候的体验度。
    * */
</script>
</html>

 

以上是关于上拉数据加载的主要内容，如果未能解决你的问题，请参考以下文章

Vue 利用Vant组件实现数据的上拉刷新，下拉加载

mui 上拉刷新加载template数据

Android——Xlistview上拉刷新下拉加载

微信小程序下拉加载与上拉刷新

MUI - 上拉刷新/下拉加载

上拉刷新，下拉加载