JavaScript实现页面下拉刷新

一个简单的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


<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>pullToRefreshtitle>
    <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>1li>
        <li>2li>
        <li>3li>
        <li>4li>
        <li>5li>
        <li>6li>
        <li>7li>
        <li>8li>
        <li>9li>
        <li>10li>
        <li>11li>
        <li>12li>
        <li>13li>
        <li>14li>
        <li>15li>
        <li>16li>
        <li>17li>
        <li>18li>
        <li>19li>
        <li>20li>
    ul>
    
    <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('
  • ' + ((current_page - 1) * 20 + i) + '
  • '
    ); } document.querySelector('#list').innerHTML += html.join(''); return true; }
    script> body> html>

    你可能感兴趣的:(JavaScript)