上拉刷新，下拉加载

<!doctype html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <link href="css/mui.min.css" rel="stylesheet" />  
<link href="css/TopBottomScroll.css" />  
    </head>  

    <body>  
        <div id="slider" class="mui-slider mui-fullscreen">  
                <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
                    <a class="mui-control-item" href="#item1mobile">  
                        公司新闻  
                    </a>  
                    <a class="mui-control-item" href="#item2mobile">  
                        媒体关注  
                    </a>  
                    <a class="mui-control-item" href="#item3mobile">  
                        最新公告  
                    </a>  
                </div>  
                <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>  
                <div class="mui-slider-group">  
                    <div id="item1mobile" class="mui-slider-item mui-control-content mui-active mui-content">  
                        <div id="scroll1" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <ul class="mui-table-view">  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-1  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-2  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-3  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-4  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-5  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-6  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-7  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-8  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-9  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-10  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-11  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-12  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-13  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-14  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-15  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-16  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-17  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-18  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-19  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-20  
                                    </li>  
                                </ul>  
                            </div>  
                        </div>  
                    </div>  
                    <div id="item2mobile" class="mui-slider-item mui-control-content">  
                        <div id="scroll2" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <div class="mui-loading">  
                                    <div class="mui-spinner">  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  

                    </div>  
                    <div id="item3mobile" class="mui-slider-item mui-control-content">  
                        <div id="scroll3" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <div class="mui-loading">  
                                    <div class="mui-spinner">  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  

                    </div>  
                </div>  
            </div>  
        <script src="js/mui.min.js"></script>  
        <script src="js/TopBootomScroll.js"></script>  
        <script type="text/javascript">  
            mui.init();  
            (function($) {  

                var createFragment = function(ul, index, count, reverse) {  
                    var length = ul.querySelectorAll('li').length;  
                    var fragment = document.createDocumentFragment();  
                    var li;  
                    for (var i = 0; i < count; i++) {  
                        li = document.createElement('li');  
                        li.className = 'mui-table-view-cell';  

                        li.innerHTML = '<a href="javascript:;">'  
                        +'  <img class="mui-media-object mui-pull-left" src="images/slider/slider_image_6.jpg">'  
                        +'  <div class="mui-media-body">'  
                        +'      房子限购，股票大跌'  
                        +'      <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>'  
                        +'  </div>'  
                        +'</a>';  
                        fragment.appendChild(li);  
                    }  
                    return fragment;  
                };  

                var html2 = '<ul class="mui-table-view"></ul>';  
                var html3 = '<ul class="mui-table-view"></ul>';  
                var item2 = document.getElementById('item2mobile');  
                var item3 = document.getElementById('item3mobile');  
                document.getElementById('slider').addEventListener('slide', function(e) {  
                    if (e.detail.slideNumber === 1) {  
                        if (item2.querySelector('.mui-loading')) {  
                            setTimeout(function() {  
                                item2.querySelector('.mui-scroll').innerHTML = html2;  
                                var ul = item2.querySelector('.mui-scroll').querySelector("ul");  
                                ul.appendChild(createFragment(ul,0,20,""));  
                            }, 500);  
                        }  
                    } else if (e.detail.slideNumber === 2) {  
                        if (item3.querySelector('.mui-loading')) {  
                            setTimeout(function() {  
                                item3.querySelector('.mui-scroll').innerHTML = html3;  
                                var ul = item3.querySelector('.mui-scroll').querySelector("ul");  
                                ul.appendChild(createFragment(ul,0,20,""));  
                            }, 500);  
                        }  
                    }  
                });  

                $("#scroll1").TopBootomScroll({  
                        down:{  
                            callback: function(sllef) {  
                                setTimeout(function(){  
                                    sllef.removeTopStyle();  
                                },5000);  
                            }  
                        },  
                        up: {  
                            callback: function(sllef) {  
                                setTimeout(function(){  
                                    sllef.removeButtonStyle();  
                                },5000);  
                            }  
                        }  
                    });  
                $("#scroll2").TopBootomScroll({  
                        down:{  
                            callback: function(sllef) {  
                                setTimeout(function(){  
                                    sllef.removeTopStyle();  
                                },5000);  
                            }  
                        },  
                        up: {  
                            callback: function(sllef) {  
                                setTimeout(function(){  
                                    sllef.removeButtonStyle();  
                                },5000);  
                            }  
                        }  
                    });  
                $("#scroll3").TopBootomScroll({  
                        down:{  
                            callback: function(sllef) {  
                                setTimeout(function(){  
                                    sllef.removeTopStyle();  
                                },5000);  
                            }  
                        },  
                        up: {  
                            callback: function(sllef) {  
                                setTimeout(function(){  
                                    sllef.removeButtonStyle();  
                                },5000);  
                            }  
                        }  
                    });  
            })(mui);  

        </script>  
    </body>  

</html>

TopBootomScroll.js

(function($){  
    $.fn.TopBootomScroll = function(options){  
        var obl = true;  
        if(options){  
            obl = false;  
        }  
        $(this).scroll({  
            indicators: true //是否显示滚动条  
        });  
        options = options || {};  
        options = $.extend(true,{  
            down:{  
                obl:false,  
                Y:50,//下拉超出的（downY）长度，开始加载  
                callback: function(sllef) {}  
            },  
            up: {  
                obl:false,  
                Y:50,//上拉超出的（downY）长度，开始加载  
                callback: function(sllef) {}  
            }  
        },options);  

        this.each(function() {  
            var sllef = this;  

            sllef.options = options;  
            sllef.removeTopStyle = function(){  
                if(this.querySelector(".mui-scroll").querySelector(".topStyle") != null){  
                    this.querySelector(".mui-scroll").removeChild(this.querySelector(".mui-scroll").querySelector(".topStyle"));  
                }  
            };  
            sllef.removeButtonStyle = function(){  
                if(this.querySelector(".mui-scroll").querySelector(".buttonStyle") != null){  
                    this.querySelector(".mui-scroll").removeChild(this.querySelector(".mui-scroll").querySelector(".buttonStyle"));  
                    console.info("scrollerWidth："+sllef.scrollerWidth)  
                    $(this).scroll().scrollTo(0,-(sllef.scrollerWidth-this.options.up.Y-10),100);  
                }  
            };  
            sllef.addEventListener("scroll",function(e){  
                console.info(e.detail.scrollerWidth);  
                sllef.scrollerWidth = e.detail.scrollerWidth;  
                console.info("scroll")  
                if(e.detail.lastY == 0){  
                    console.info("下拉到顶部")  
                    console.info("lastY:"+e.detail.lastY)  
                    console.info("maxScrollY:"+e.detail.maxScrollY)  
                    if(obl){  
                        setTimeout(function(){  
                            sllef.removeTopStyle();  
                        },500);  
                    }  
                    if(options.down.obl){  
                        var html = '<div class="mui-loading">'  
                                +   '<div class="mui-spinner">'  
                                +   '</div>'  
                                + '<div class="mui-pull-caption">正在加载中...</div>'  
                                +'</div>';  
                        this.querySelector(".mui-scroll").querySelector(".topStyle").innerHTML = html;  
                        options.down.obl = false;  
                        options.down.callback(this);  
                    }else{  
                        sllef.removeTopStyle();  
                    }  
                }else if(e.detail.lastY > 0){  
                    console.info("下拉超过顶部")  
                    console.info(this.querySelector(".mui-scroll").querySelector(".topStyle") == null)  
                    if(this.querySelector(".mui-scroll").querySelector(".topStyle") == null){  
                        var div = document.createElement("div");  
                        div.className = "topStyle";  
                        div.innerHTML = "下拉可以刷新";  
                        var fragment = document.createDocumentFragment();  
                        fragment.appendChild(div);  
                        this.querySelector(".mui-scroll").insertBefore(div,this.querySelector(".mui-scroll").firstChild);  
                    }  
                    console.info(options.down.Y)  
                    console.info(e.detail.lastY)  
                    console.info(e.detail.lastY >= options.down.Y)  

                    if(e.detail.lastY >= options.down.Y){  
                        this.querySelector(".mui-scroll").querySelector(".topStyle").innerHTML = "释放立即刷新";  
                        options.down.obl = true;  
                    }  
                    console.info("lastY:"+e.detail.lastY)  
                }else if(e.detail.lastY == e.detail.maxScrollY){  
                    console.info("上拉到底部")  
                    if(obl){  
                        setTimeout(function(){  
                            sllef.removeButtonStyle();  
                        },500);  
                    }  
                    if(options.up.obl){  
                        var html = '<div class="mui-loading">'  
                                    +   '<div class="mui-spinner">'  
                                    +   '</div>'  
                                    + '<div class="mui-pull-caption">正在加载中...</div>'  
                                    +'</div>';  
                        this.querySelector(".mui-scroll").querySelector(".buttonStyle").innerHTML = html;  
                        options.up.obl = false;  
                        options.up.callback(this);  
                    }else{  
                        sllef.removeButtonStyle();  
                    }  
                }else if(e.detail.lastY < e.detail.maxScrollY){  
                    console.info("上拉超过底部")  
                    if(this.querySelector(".mui-scroll").querySelector(".buttonStyle") == null){  
                        var div = document.createElement("div");  
                        div.className = "buttonStyle";  
                        div.innerHTML = "上拉可以刷新";  
                        this.querySelector(".mui-scroll").appendChild(div);  
                    }  
                    console.info("lastY:"+e.detail.lastY)  
                    console.info(e.detail.lastY - e.detail.maxScrollY <= -options.up.Y)  
                    if(e.detail.lastY - e.detail.maxScrollY <= -options.up.Y){  
                        this.querySelector(".mui-scroll").querySelector(".buttonStyle").innerHTML = "释放立即刷新";  
                        options.up.obl = true;  
                    }  
                }  
            });  
        });  
    };  
    $("#scroll1").TopBootomScroll({  
            down:{  
                callback: function(sllef) {  
                    setTimeout(function(){  
                        sllef.removeTopStyle();  
                    },5000);  
                }  
            },  
            up: {  
                callback: function(sllef) {  
                    setTimeout(function(){  
                        sllef.removeButtonStyle();  
                    },5000);  
                }  
            }  
        });  
})(mui);

TopBottomScroll.css

.topStyle,.buttonStyle{  
    text-align: center;  
    padding: 5px;  
}  
.topStyle .mui-loading,.buttonStyle .mui-loading{  
    margin-top: 0;  
}  
.topStyle{  
    border-bottom: 1px solid #E4E3E6;  
}  
.buttonStyle{  
    border-top: 1px solid #E4E3E6;  
}  

.topStyle .mui-loading .mui-spinner,.buttonStyle .mui-loading .mui-spinner{  
    display: inline-block;  
    vertical-align: middle;  
    margin-right: 7px;  
}

上拉刷新，下拉加载

4 个评论

目录

公告

相关问题