zoukankan      html  css  js  c++  java
  • iscroll5 版本下的 上拉,下拉 加载数据

    上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码。


    <
    section id="downwraper" class="nodeBottom bot0 bgfff"> <div id="downscroller"> <div id="pullDown"> <div class="pullDownLabel">正在加载中...</div> </div> <div id="out"> <div id="datalist"> </div> </div> <div id="pullUp"> <div class="pullUpLabel">正在加载中...</div> </div> </div> </section> <div class="fixedbg navfixed"> </div><br><br>
    <script><br>  //上拉
        var strStop = true;
        var page_data_url = '/chinalao/wap/public/sgrab/indexlist';
        var noDataUrl = '/chinalao/wap/public/sgrab/indexmore';
        var condition_str = 'dG90YWxfY291bnQ9MCZjaXR5aWQ9NDIyNg%3D%3D';
        var page_count = 1;
        var current_page = 1;
         
        var loadlist = new Loadlist({'pageUrl':page_data_url,'pageCondition':condition_str,"pageNoUrl":noDataUrl,'pageCount':page_count,'stopDown':strStop,'callback':function(){
      
            if($("#datalist").outerHeight()<=($(window).height()-120)){
                $("#out").height($(window).height()-120);
                loadlist._setOptionStopDown(true);
            }else{
                $("#out").css("height","auto");     
                loadlist._setOptionStopDown(false);
            }
        }});
        loadlist.loaded();
    
    </script>
    <script>
    //js:
    ;(function () {  
        var Loadlist = function(opt) {
            var strScroll; 
            var pullUpEl, pullUpL;
            var pullDownEl, pullDownL;        
            var loadingStep = 0; 
            var strHtml="";
            var curpage = 1;
            this.defaults = {
                'pageUrl':"",
                'pageCondition':"",
                'pageNoUrl':"",
                'pageCount':1,
                'stopDown':false,
                'callback':null
            },
            this.options = $.extend({}, this.defaults, opt);
            this.stopDownMod = this.options.stopDown;
            this.stopClick = false;
        };
        Loadlist.prototype = {
            loaded: function() {
                var pgCount=this.options.pageCount;
                var _this = this;
                pullDownEl = $('#pullDown');  
                pullDownL = pullDownEl.find('.pullDownLabel');  
                pullDownEl.attr('class','').hide(); 
                
                pullUpEl = $('#pullUp');  
                pullUpL = pullUpEl.find('.pullUpLabel');  
                pullUpEl.attr('class','').hide();  
                strScroll = new IScroll('#downwraper', {  
                    probeType: 2
                });  
                //滚动时  
                strScroll.on('scroll', function(){  
                        if(pullDownEl.length>0&&!pullDownEl.attr('class').match('flip|loading'&&loadingStep == 0) ){
                            if (this.y>5) {  
                                //下拉刷新效果  
                                pullDownEl.show();  
                                pullDownEl.addClass('flip');  
                                pullDownL.html('下拉显示更多...');  
                                loadingStep = 1;
                                //下拉获取数据并改变条件
                                _this.getNoData(); //可删除 此为加载数据改变页面上的条件
                                //strScroll.refresh(); //修正跳动bug
                            }    
                        }
                        if(loadingStep == 0&& !pullUpEl.attr('class').match('flip|loading')&&!_this.stopDownMod){                     
                            if (this.y < (this.maxScrollY - 5)) {  
                                //上拉刷新效果
                                pullUpEl.show();  
                                strScroll.refresh();  
                                pullUpEl.addClass('flip');
                                if(pgCount>curpage){
                                    pullUpL.html('上拉显示更多...');
                                }else{
                                    pullUpL.html('已经是最后一页');
                                }
                                loadingStep = 1;  
                            }  
                        }  
                });  
                //滚动完毕  
                strScroll.on('scrollEnd',function(){  
                    if(loadingStep == 1){ 
                        if(pullDownEl.length>0&&pullDownEl.attr('class').match('flip|loading')){  
                            pullDownEl.removeClass('flip').addClass('loading');  
                            pullDownL.html('正在加载...');  
                            loadingStep = 2;  
                            _this.pullDownAction();  
                        }
                        if(pgCount>curpage){//如果当前页码小于总页数,即可执行翻页
                            if (pullUpEl.attr('class').match('flip|loading')) {  
                                pullUpEl.removeClass('flip').addClass('loading');  
                                pullUpL.html('正在加载...');  
                                loadingStep = 2;
                                _this.pullUpAction();
                            } 
                        }                    
                    }                
                
                });
                
                if(this.stopClick){
                    $("#downwraper").bind("click",function(){
                        _this.getData(1,true);
                    });
                } 
                //第一次初始化数据
                this.getData(1);
            },
            _getDataClick:function(){
                this.getData(1,true);
            },    
            _setOptionStopDown:function(ot){
                this.stopDownMod = ot;
            },
            loadRefresh:function(){
                strScroll.refresh();
            },
            pullDownAction:function(){
                var _this = this;
                setTimeout(function() {
                    _this.getData(1,true);
                }, 1000); 
            },        
            pullUpAction:function(){
                var _this = this;
                setTimeout(function() {
                    _this.getData(curpage+1);
                }, 1000); 
            },
            pullDownGetData:function(){
                pullDownEl.removeClass('loading');  
                pullDownL.html('下拉显示更多...');  
                pullDownEl['class'] = pullUpEl.attr('class');  
                pullDownEl.attr('class','').hide(); 
            },
            pullUpGetData:function(){
                pullUpEl.removeClass('loading');  
                pullUpL.html('上拉显示更多...');  
                pullUpEl['class'] = pullUpEl.attr('class');  
                pullUpEl.attr('class','').hide();  
            },
            getNoData:function(){
                var _that = this;
                $.ajax({
                    'url':_that.options.pageNoUrl,
                    'type':'GET',
                    'dataType':'json',
                    success:function(data){
                        if(data.status==1){
                            _that.options.pageCondition = data.condition_str;
                            $("#downwraper").unbind();
                        }else{
                            $("#downwraper").bind("click",function(){
                                _that.getData(1,true);
                            });
                            //$.AlertBox({title:'没有数据了'});
                        }
                    }
                });
            },
            getData:function(pg,up){
                var _that = this;
                curpage = pg;
                $.ajax({
                    'url':_that.options.pageUrl+'?str='+_that.options.pageCondition+'&page='+pg,
                    'type':'GET',
                    'dataType':'html',
                    'data':'',
                    beforeSend:function(){
                        if(curpage==1) {
                            $(".fixedbg").fadeIn(100);                    
                            $("#datalist").append("<div class='loading'></div>");
                        }
                    },
                    success:function(strHtml){
                        $('#datalist .loading').remove();
                        $(".fixedbg").fadeOut(100);
                        if(up){
                            $("#datalist").html(strHtml);
                        }else{
                            $("#datalist").append(strHtml);
                        }
                        _that.pullUpGetData();
                        _that.pullDownGetData();
                        loadingStep = 0;
                        if(typeof(_that.options.callback)=="function"){
                            _that.options.callback();
                        }
                        strScroll.refresh(); 
                        //应该放到用到的页面中,在回调函数中调用^-^!.
                        iconLoad();//info load icon                        
                        //
                    },
                    error:function(){
    
                    }
                });
            }    
        };
        window.Loadlist = Loadlist;
    }());
    </script>

     参考:http://www.w2bc.com/Article/49414

  • 相关阅读:
    openlayers之标注功能四:聚合标注
    openlayers加载百度地图作为底图坐标偏移的解决办法
    设置bootstrap按钮组选中状态
    openlayers F11全屏显示
    8000401a 因为配置标识不正确,系统无法开始服务器进程。请检查用户名和密码
    IDA使用之旅(一)用IDA查看最简单的sys文件
    IDA使用之旅(三)实践中使用IDA工具
    IDA使用之旅(二)工具及窗口的使用
    正则表达式26英文字母大小写互转
    Ollydbg 中断方法
  • 原文地址:https://www.cnblogs.com/cyehu/p/4755703.html
Copyright © 2011-2022 走看看