js 手机端滑动分页SPager 基本示例

最新推荐文章于 2024-08-22 15:47:42 发布

Rand Tsui

最新推荐文章于 2024-08-22 15:47:42 发布

阅读量6.5k

点赞数

分类专栏： web前端文章标签：手机分页 javascript

本博客所有公开的原创博文皆允许转载，无须再征求作者本人（也就是我）同意

本文链接：https://blog.csdn.net/for_cxc/article/details/51981798

版权

web前端专栏收录该内容

85 篇文章 1 订阅

订阅专栏

HTML页

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, width=device-width,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />
    <title>SPager</title>
    <link href="SPager.css" rel="stylesheet" />
    <script src="SPager.js"></script>
</head>
<body>
    
</body>
</html>

CSS页

*{
    margin:0px;
    padding:0px;
}
body{
    
}
div{
    height:80px;
}
#loading{
    height:66px;
}

JavaScript页

(function () {
    window.SPager = function () {
        window._this = this;
        this.body = document.body;
        this.W = window.innerWidth;
        this.H = window.innerHeight;
        this.cc = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
        this.PageSize = 10;
        this.count=0;
        this.loadgif = null;
        this.img_loading_flag = false;
    };
    SPager.prototype = {
        Start: function () {
            this.loadimg();
            this.Create_div();
            this.AddEvent();
        },
        loadimg:function(){
            this.loadgif = new Image();
            this.loadgif.onload = function(){
                _this.img_loading_flag=true;
            };
            this.loadgif.src = "imgs/loading.gif";
        },
        Create_div: function () {
            for (var i = 0; i < this.PageSize; i++) {
                var div = document.createElement("div");
                div.setAttribute("style", "width:" + this.W);
                div.setAttribute("style", "background-color:" + this.getColor());
                this.count++;
                div.innerText = this.count;
                document.body.appendChild(div);
            }
        },
        getColor: function () {
            var divcolor = "#";
            for (var i = 0; i < 6; i++) {
                var ran = Math.floor(16 * Math.random());
                divcolor += this.cc[ran];
            }
            return divcolor;
        },
        AddEvent: function () {
            var fun = function () {
                if (document.body.scrollTop == document.body.scrollHeight - _this.H) {
                    document.body.removeEventListener("touchmove", fun, false);
                    _this.AddLoading();
                    setTimeout(function () {
                        _this.RemoveLoading();
                        _this.Create_div();
                        document.body.addEventListener("touchmove", fun, false);
                    }, 3000);
                }   
            };
            document.body.addEventListener("touchmove", fun, false);
        },
        AddLoading: function () {
            var loading = document.createElement("div");
            loading.setAttribute("id", "loading");
            loading.setAttribute("style", "width:" + this.W);
            loading.setAttribute("style", "text-align:center");
            while(!this.img_loading_flag){

            }
            loading.appendChild(this.loadgif);
            document.body.appendChild(loading);
        },
        RemoveLoading: function () {
            var loading = document.getElementById("loading");
            document.body.removeChild(loading);
        },
    };
}());
document.addEventListener("DOMContentLoaded", function () { new SPager().Start() }, false);