Mobile terminal listens to the paged loading list of scroll bar

When processing list data, when the data volume is too large, we will do paging processing to reduce the pressure on the server. The paging effect is as follows:



In the actual project development, paging generally requests the background interface, the incoming page number and the number of pages to be displayed. The background returns a list and the total number of pages to the foreground according to the parameters. The total number of pages is used to tell the foreground whether the next page needs to be loaded.
Here we use the json data of local simulation, and the paging code is as follows:

 var JSON_DATA =
                    [
                        {
                            "title" : "①: ①①①",
                            "date" : "2018-12-21",
                            "tag" : "Hot spots today"
                        },
                        {
                            "title" : "②: ②②②",
                            "date" : "2018-12-20",
                            "tag" : "Hot spot of competition"
                        },
                        {
                            "title" : "③: ③③③",
                            "date" : "2018-12-21",
                            "tag" : "Hot spots today"
                        },
                        {
                            "title" : "④: ④④④",
                            "date" : "2018-12-20",
                            "tag" : "Hot spot of competition"
                        },
                        {
                            "title" : "⑤: ⑤⑤⑤",
                            "date" : "2018-12-21",
                            "tag" : "Hot spots today"
                        },
                        {
                            "title" : "⑥: ⑥⑥⑥",
                            "date" : "2018-12-20",
                            "tag" : "Hot spot of competition"
                        },
                        {
                            "title" : "⑦: ⑦⑦⑦",
                            "date" : "2018-12-21",
                            "tag" : "Hot spots today"
                        }
                    ];
/*Load paging data*/
function loadInfo() {
        /**No more data added on the last page*/
        if("false" == $("#loadTip").attr("toLoad")){
            return;
        }
        var t = $("#newsList");
        /*Current page number*/
        var page = t.attr("page");
        /*Suppose seven pieces of data are loaded in one page*/
        var rows = 7;
        /*Suppose there are 24 pieces of data in total (if it is the request server interface, then total is the total number of pieces returned by the interface)*/
        var total = 21;
        $("#loadTip").show();
        var toLoad = total - (rows * (page - 1)) - rows > 0;
        /*When there is no next page, change the prompt text and do not fill in the data next time*/
        if(!toLoad){
            $("#loadTip").text(" loading completed! ").attr("toLoad",false);;
        }
        //Get the template through the id defined by the template
        var tpl = $("#newsListTemplate").html();
        //Precompiled template
        var template = Handlebars.compile(tpl);
        //Incoming data match to be filled
        var html = template(JSON_DATA);
        //Insert template into ul
        t.append(html);
        t.attr("page", ++page);
    }

Here we use the Handlebars template (the previous article on Handlebars) to fill in the data, or we can directly use jquery to splice the data, depending on the actual situation of the project.

Monitor the position of the scroll bar. If you reach the bottom of the page, load the next page

$(window).load(function(){
        $(window).scroll(function () {
            //Scrolled to the page height above
            var scrollTop = $(this).scrollTop();
            //Page height
            var scrollHeight = $(document).height();
            //Browser window height
            var windowHeight = $(this).height();
            //This is the event triggered when the scroll bar reaches the bottom. Write the data to be loaded here, or pull the scroll bar
            if (scrollTop + windowHeight == scrollHeight) {
                loadInfo();
            }
        });
    })

The complete code of the rendering is as follows:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>Handlebar Example news list</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .news-list > h4 {
            padding: .3rem .2rem;
            font-size: .32rem;
            border-bottom: 1px solid #d2d2d2;
        }
        .news-list ul li{
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            margin-left: .2rem;
            padding: .45rem .3rem .45rem 0;
            border-bottom: 1px solid #d2d2d2;
            font-size: .3rem;
            color: #4e4e4e;
        }
        .news-list ul li .left{
            margin-right: .4rem;
        }
        .news-list ul li .left span{
            display: block;
            width: 1.8rem;
            height: 1.2rem;
            background-color: #d2d2d2;
        }
        .news-list ul li .right{
            width: 100%;
        }
        .news-list ul li .right h4{
            font-weight: normal;
            margin-top: -.1rem;
            margin-bottom: .12rem;
        }
        .news-list ul li .right div{
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
        }
        .news-list ul li .right div span{
            display: inline-block;
            font-size: .24rem;
        }
        .news-list ul li .right div span:first-of-type{
            padding: .02rem .04rem;
            background-color: #4a6efc;
            color: #fff;
        }
        .load-tip{
            display: none;
            margin: .2rem auto;
            text-align: center;
            font-size: .24rem;
            color: #b9b9b9;
        }
    </style>
    <script>
        (function (doc, win) {
            var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function () {
                        var clientWidth = docEl.clientWidth;
                        if (!clientWidth) return;
                        if(clientWidth>=640){
                            docEl.style.fontSize = '85px';
                        }else{
                            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                        }
                    };

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
</head>
<body>
<div class="news-list">
    <h4>News list</h4>
    <ul id="newsList" page="1"></ul>
    <p id="loadTip" class="load-tip" toLoad="true">Pull up to load more</p>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/handlebars.js/4.0.6/handlebars.js"></script>
<script>
    $(window).load(function(){
        $(window).scroll(function () {
            //Scrolled to the page height above
            var scrollTop = $(this).scrollTop();
            //Page height
            var scrollHeight = $(document).height();
            //Browser window height
            var windowHeight = $(this).height();
            //This is the event triggered when the scroll bar reaches the bottom. Write the data to be loaded here, or pull the scroll bar
            if (scrollTop + windowHeight == scrollHeight) {
                loadInfo();
            }
        });
    })
    $(function(){
        loadInfo();
    })
    /*Load paging data*/
    function loadInfo() {
        /**No more data added on the last page*/
        if("false" == $("#loadTip").attr("toLoad")){
            return;
        }
        var t = $("#newsList");
        /*Current page number*/
        var page = t.attr("page");
        /*Suppose seven pieces of data are loaded in one page*/
        var rows = 7;
        /*Suppose there are 24 pieces of data in total (if it is the request server interface, then total is the total number of pieces returned by the interface)*/
        var total = 21;
        $("#loadTip").show();
        var toLoad = total - (rows * (page - 1)) - rows > 0;
        /*When there is no next page, change the prompt text and do not fill in the data next time*/
        if(!toLoad){
            $("#loadTip").text(" loading completed! ").attr("toLoad",false);;
        }
        //Get the template through the id defined by the template
        var tpl = $("#newsListTemplate").html();
        //Precompiled template
        var template = Handlebars.compile(tpl);
        //Incoming data match to be filled
        var html = template(JSON_DATA);
        //Insert template into ul
        t.append(html);
        t.attr("page", ++page);
    }
</script>
<script type="text/template" id="newsListTemplate">
    <!--each ergodic json array-->
    {{#each this}}
    <li class="flex">
        <div class="left">
            <span></span>
        </div>
        <div class="right">
            <h4>{{title}}</h4>
            <div class="flex">
                <span>{{tag}}</span>
                <span>{{date}}</span>
            </div>
        </div>
    </li>
    {{/each}}
</script>
<script>
    var JSON_DATA =
                    [
                        {
                            "title" : "①: ①①①",
                            "date" : "2018-12-21",
                            "tag" : "Hot spots today"
                        },
                        {
                            "title" : "②: ②②②",
                            "date" : "2018-12-20",
                            "tag" : "Hot spot of competition"
                        },
                        {
                            "title" : "③: ③③③",
                            "date" : "2018-12-21",
                            "tag" : "Hot spots today"
                        },
                        {
                            "title" : "④: ④④④",
                            "date" : "2018-12-20",
                            "tag" : "Hot spot of competition"
                        },
                        {
                            "title" : "⑤: ⑤⑤⑤",
                            "date" : "2018-12-21",
                            "tag" : "Hot spots today"
                        },
                        {
                            "title" : "⑥: ⑥⑥⑥",
                            "date" : "2018-12-20",
                            "tag" : "Hot spot of competition"
                        },
                        {
                            "title" : "⑦: ⑦⑦⑦",
                            "date" : "2018-12-21",
                            "tag" : "Hot spots today"
                        }
                    ];
</script>
</body>
</html>

Technical blog of the original author: https://www.jianshu.com/u/ac4daaeecdfe
After 95, there is a front-end girl who loves reading and making friends. Record the problems encountered in work here, hoping to bring a little help to everyone you see.
Welcome to leave a message.

Tags: Handlebars JQuery JSON Javascript

Posted on Sat, 30 Nov 2019 11:07:02 -0800 by kester