JavaScript实现页面下拉刷新

来源：互联网发布：最新网页制作软件编辑：程序博客网时间：2024/06/10 03:11

一个简单的JavaScript实现的页面下拉刷新插件如下：

pullToRefresh.js

(function(exports){    var document = exports.document;    function PullToRefresh(opts){        if(!(this instanceof PullToRefresh)){            return;        }        this.onRefresh = null;        this.initialized = false;        return this;    }    exports.PullToRefresh = PullToRefresh;    PullToRefresh.prototype = {        init: function(opts){            this.locked = false;            this.paused = false;            this.page = 1;            this.max_page = 0;            this.configure(opts);            this.initialized || (this.initialized = true, this.initEvent());            return this;        },        initEvent: function(){            var _this = this;            exports.addEventListener('scroll', function(){                if(_this.paused || _this.locked){                    return;                }                if(document.body.scrollHeight - exports.innerHeight - document.body.scrollTop < 50){                    _this.refresh();                }            }, false);        },        configure: function(opts){            if(opts && typeof opts === 'object'){                if(opts instanceof Object){                    for(var pro in opts){                        this[pro] = opts[pro];                    }                }            }        },        refresh: function(){            if(this.page >= this.max_page){                return;            }            if(this.onRefresh && typeof this.onRefresh === 'function'){                this.locked = true;                if(this.onRefresh() === true){                    this.page++;                }                this.locked = false;            }        },        pause: function(){            this.paused = true;        },        resume: function(){            this.paused = false;        }    };})(window);

main.css

html, body{    width: 100%;    margin: 0;    padding: 0;}html{    overflow-x: hidden;    overflow-y: auto;}ul{    list-style: none;    margin: 0;    padding: 0;}p{    padding: 0;    margin: 0;}a{    text-decoration: none;}

index.html

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">    <meta content="yes" name="apple-mobile-web-app-capable">    <meta content="black" name="apple-mobile-web-app-status-bar-style">    <meta content="telephone=no" name="format-detection">    <meta content="email=no" name="format-detection">    <title>pullToRefresh</title>    <link rel="stylesheet" href="./css/main.css">    <style>        .list{            box-sizing: border-box;            position: relative;            background-color: #ccc;            color: #fff;            font-weight: bold;            text-align: center;            padding-bottom: 10px;        }        .list>li{            width: 80%;            height: 30px;            line-height: 30px;            margin: 10px auto 0;            border-radius: 4px;            background-color: #428bca;            display: inline-block;        }    </style></head><body>    <ul class="list" id="list">        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>        <li>6</li>        <li>7</li>        <li>8</li>        <li>9</li>        <li>10</li>        <li>11</li>        <li>12</li>        <li>13</li>        <li>14</li>        <li>15</li>        <li>16</li>        <li>17</li>        <li>18</li>        <li>19</li>        <li>20</li>    </ul>    <!-- javascript -->    <script src="./js/pullToRefresh.min.js"></script>    <script>        var current_page = 1,            max_page = 5;        // refresh        var refresh = new PullToRefresh().init({            onRefresh: onRefresh,            max_page: max_page        });        function onRefresh(){            var i,                html = [];            current_page++;            for(i = 1; i <= 20; i++){                html.push('<li>' + ((current_page - 1) * 20 + i) + '</li>');            }            document.querySelector('#list').innerHTML += html.join('');            return true;        }    </script></body></html>

0 0