一個簡單的無限滾動的加載數據實現

時間 2019-11-29

標籤一個簡單無限滾動加載數據實現简体版

原文原文鏈接

早上原本想研究昨天晚上攜程的那道題目的，可是感受不知道如何下手，就研究了下如何實現無限滾動加載數據。html

之前項目裏也用到過，不過是別人封裝好的，我只須要調用就行了。本身作仍是遇到了點小問題。數據庫

一、如何肯定滾動條的位置，其實想通了很簡單的，就是利用scrollHeight和scrollTop以及可視區的高度來實現的。函數

二、就是如何保證加載數據的時候，不會出現重複加載。這個也很簡單，標記每次加載結束的位置。若是你用的是數據庫的話，能夠採用分頁的形式，每次只添加一頁的內容。每當滾動條到底部的時候再加載下一頁就行了。spa

固然，你也能夠對代碼進行改進，每當加載數據的時候，出現一個圈圈，提醒用戶我是在努力加載數據。使得用戶不會出現煩躁的心情。code

附源碼以下：htm

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。