找回密码
当前位置：前端开发者 > JavaScript > 正文

移动端原生js完成上拉加载下拉刷新

2018-10-12 分类：JavaScript 阅读(720) 评论(0)

移动前端开发技术 web前端与移动开发视频教程 移动互联网应用技术前端开发
html 代码

<!doctype html>
<head>
    <!–适应移动端–>
    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0″>
    <meta name=”apple-mobile-web-app-capable” content=”yes”>
    <meta name=”apple-mobile-web-app-status-bar-style” content=”black”>
    <title>游戏</title>
    <style type=”text/css”>
        /* css Document */
        * {
            margin: 0px;
            padding: 0px;
        }
        body {
            font-size: 62.5%;
        }
        /*游戏图文*/
        #wrapper {
            padding-bottom: 5em;
            overflow: scroll;
        }
        #wrapper li {
            background-color: #FFF;
            list-style: none;
            border: solid 1px #F4F4F4;
            padding: .5em 1em;
            height: 6em;
        }
        #gameList li img {
            float: left;
            border-radius: 5px;
            width: 6em;
            height: 6em;
        }
        .game-info {
            text-align: left;
            float: left;
            margin-left: .5em;
            width: calc(100% – 15em);
        }
        .game-info * {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .game-info h6 {
            font: 200 1.4em “”;
            color: #000;
            margin-top: .4em;
        }
        .game-info p:nth-child(2),
        .game-info p:nth-child(3) {
            line-height: 1.2em;
            font: 100 1em “”;
            color: #B6B6B6;
        }
        #gameList button,
        #button {
            font-weight: lighter;
            width: 4.5em;
            height: 2em;
            background-color: #2CB0BA;
            color: #FFF;
            border: 0px;
            border-radius: 5px;
            float: right;
            margin: 1.7em 0px;
        }
    </style>
</head>
<body>
    <!–内容显示区–>
    <div id=”wrapper” style=”height:50em;”>
        <ul id=”gameList”>
        </ul>
    </div>
    <!–js–>
    <script type=”text/javascript”>
        var upDown = function (opt) {
            debugger
            opt = opt || {};
            var ele = opt.ele || ‘container’;
            var up = opt.up || function () { };
            var down = opt.down || function () { };
            /*上拉刷新和下拉加载*/
            document.getElementById(ele).onscroll = function () {
                var scrollTop = this.scrollTop; //滚动条距离顶部的高度 ——窗口滚动距离
                var ziHeight = this.scrollHeight; //当前页面的总高度
                var fuHeight = this.clientHeight; //当前可视的页面高度
                if (scrollTop + fuHeight + 50 >= ziHeight) { //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
                    up();
                } else if (scrollTop <= 50) { //滚动条距离顶部的高度小于等于0
                    down();
                }
            }
        }
        /**
         *取值函数
         */
        function getData() {
            count++;//计数
            var el, li, i;
            el = document.querySelector(“#wrapper ul”);
            for (i = 0; i < 8; i++) {
                li = document.createElement(‘li’);
                li.innerHTML = “<div onclick=\”javascript:window.location.href=’XXX.html’\”><img src=’imgPath’><div class=’game-info’><h6>name” + count + “</h6>desc+createTime+</div></div><button onclick=\”javascript:window.location.href=’XXX.html’\”>打开</button>”;
                el.appendChild(li, el.childNodes[0]);
            }
        }
        var count = 0;
        window.onload = function () {
            //加载第一屏数据
            getData();
            /*上拉刷新和下拉加载*/
            upDown({
                ele: “wrapper”,
                up: getData,
                down: function () { alert(“down~~”) },
            });
        }
    </script>
</body>
</html>

移动端web前端开发实例 ui设计移动前端开发就业前景 前端与移动开发简历

赞(0)
前端开发者 » 移动端原生js完成上拉加载下拉刷新
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论