一个简单的无限滚动的加载数据实现

Posted huansky

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一个简单的无限滚动的加载数据实现相关的知识,希望对你有一定的参考价值。

早上本来想研究昨天晚上携程的那道题目的,但是感觉不知道如何下手,就研究了下如何实现无限滚动加载数据。

以前项目里也用到过,不过是别人封装好的,我只需要调用就好了。自己做还是遇到了点小问题。

1、如何确定滚动条的位置,其实想通了很简单的,就是利用scrollHeight和scrollTop以及可视区的高度来实现的。

2、就是如何保证加载数据的时候,不会出现重复加载。这个也很简单,标记每次加载结束的位置。如果你用的是数据库的话,可以采用分页的形式,每次只添加一页的内容。每当滚动条到底部的时候再加载下一页就好了。

 

当然,你也可以对代码进行改进,每当加载数据的时候,出现一个圈圈,提醒用户我是在努力加载数据。使得用户不会出现烦躁的心情。

附源码如下:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        ul{
            height: 100px;
            
            width: 100px;
            overflow: auto;
            margin: 0;
            padding: 0;
        }
        input{
            width: 96px;
        }
    </style>
</head>
<body>

    <div>
        <input type="text" >
        <input type="button" value="aa"/>
        <ul id="ul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>4</li>
            <li>4</li>
            <li>4</li>
            <li>s</li>
        </ul>
    </div>

    <script >
    //要加载的数据
    var arr=[1,1,2,3,8,2,32,3,5,8,28,2,3,2,3,5,3,1,4,12,1,2,1,31,23,12,3,12,3,12,3,18,35,2,1,321,3,21,3,12,3,123,6,21321,3,17,3,2,3,12,3,12,1,5,23123,1,321,3,1,23,1,3];

        var ul=document.getElementById("ul");
        var start=0;

        //监听滚动事件,当滚动条的位置距离小于某个值的时候,就加载数据
        ul.onscroll=function(){
            if(ul.scrollHeight-ul.scrollTop-90<30){
                load(start,5,arr,ul);
                start+=5;
            }
        }

    //加载数据函数    
    function load(start,num,arr,ul){
        var html="";
        if(start+num>arr.length){return ;}
        for(var s=start;s<start+num;s++){
            html+=‘<li>‘+arr[s]+‘</li>‘;

        }
        ul.innerHTML=ul.innerHTML+html;
    }
    </script>


</body>
</html>

 

以上是关于一个简单的无限滚动的加载数据实现的主要内容,如果未能解决你的问题,请参考以下文章

使用 Angular 和 RxJS 实现的无限滚动加载

ember.js 无限滚动(延迟加载)

无限滚动加载解决方案之虚拟滚动(下)

Android 高级UI设计笔记09:Android如何实现无限滚动列表

Vue组件滚动加载懒加载功能的实现,无限滚动加载组件实例演示

JS实现-页面数据无限加载