前端移动端 jQuery上拉刷新下拉加载更多页面

前端开发人员转正自我评价|web前端开发最佳实践 pdf下载|web前端开发修炼之道 下载

实现的代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
    <title>前端开发人员结构</title>
</head>
<body>
    <div id=”wrapper”>
        <ul>
            <li>row 10</li>
            <li>row 9</li>
            <li>row 8</li>
            <li>row 7</li>
            <li>row 6</li>
            <li>row 5</li>
            <li>row 4</li>
            <li>row 3</li>
            <li>row 2</li>
            <li>row 1</li>
        </ul>
    </div>
    <script>
        for (var i = 0; i < document.querySelectorAll(“#wrapper ul li”).length; i++) {
            document.querySelectorAll(“#wrapper ul li”)[i].colorfulBg();
        }
        refresher.init({
            id: “wrapper”,//<————————————————————————————┐
            pullDownAction: Refresh,
            pullUpAction: Load
        });
        var generatedCount = 0;
        function Refresh() {
            setTimeout(function () { // <– Simulate network congestion, remove setTimeout from production!
                var el, li, i;
                el = document.querySelector(“#wrapper ul”);
                el.innerHTML = ”;
                for (i = 0; i < 11; i++) {
                    li = document.createElement(‘li’);
                    li.appendChild(document.createTextNode(‘async row ‘ + (++generatedCount)));
                    el.insertBefore(li, el.childNodes[0]);
                }
                wrapper.refresh(); /remember to refresh after action completed! —yourId.refresh(); —-| /
                for (var i = 0; i < document.querySelectorAll(“#wrapper ul li”).length; i++) {
                    document.querySelectorAll(“#wrapper ul li”)[i].colorfulBg();
                }
            }, 1000);
        }
        function Load() {
            setTimeout(function () {// <– Simulate network congestion, remove setTimeout from production!
                var el, li, i;
                el = document.querySelector(“#wrapper ul”);
                for (i = 0; i < 2; i++) {
                    li = document.createElement(‘li’);
                    li.appendChild(document.createTextNode(‘async row ‘ + (++generatedCount)));
                    el.appendChild(li, el.childNodes[0]);
                }
                wrapper.refresh();/****remember to refresh after action completed!!! —id.refresh(); — ****/
                for (var i = 0; i < document.querySelectorAll(“#wrapper ul li”).length; i++) {
                    document.querySelectorAll(“#wrapper ul li”)[i].colorfulBg();
                }
            }, 1000);
        }
    </script>
</body>
</html>

在线预览 源码下载 

前端开发cmd常用命令|40岁的前端开发人员|web前端开发手册下载

» 本文来自:前端开发者 » 《前端移动端 jQuery上拉刷新下拉加载更多页面》
» 本文链接地址:https://www.rokub.com/4827.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!