js 滚动加载

$(function(){
    var page=2,
    canPullUP=true, //控制是否可以继续滑动加载
    stopScroll=true,
    pullUpOffset=450;
function getData(id,pageSize){
    $('#pullUp').show();
    $.ajax({
        url:"http://www.86sb.com/adv/sbadvad",
        type : 'GET',
        dataType: 'jsonp',
        jsonp: 'callback',
        data: {
            id:id,
            page: page,
            page_size: pageSize,
            noflag:1
        },
        success: function(data) {
            var res=data.result.data;
            if(data.status!=0){
                canPullUP=false;
                stopScroll=false;
                return
            }
            canPullUP=true;
            stopScroll=true;
            $('#pullUp').hide();
            if(res.length==0){
                canPullUP=false;
                stopScroll=false;
                $('.last').show()
                return
            }
            for(var i=0;i<res.length;i++){
                var orderType;
                if(res[i].sbflag=='paid'){
                     orderType="paid"
                }else if(res[i].sbflag=='refund'){
                     orderType="refund"
                }else{
                orderType="non-payment"
               }
                var _html1='<div class="content">'+
                                '<a href="">'+
                                    '<div class="right">'+
                                        '<div class="top">'+
                                            '<span class="name">李大黄鸭</span>'+
                                            '<span class="time-fc fr">2018.08.16 10:49</span>'+
                                            '<span class="fr time-fc">订单日期:</span>'+
                                        '</div>'+
                                        '<div class="middle">'+
                                            '<span >商标注册号:</span>'+
                                            '<span class="fc">18493534</span>'+
                                            '<span class="fr fc">25类服装鞋帽'+'</span>'+
                                            '<span class="fr">商标类别:</span>'+
                                        '</div>'+
                                        // 二期新增html
                                        '<div class="middle">'+
                                            '<span >商标持有人:</span>'+
                                            '<span class="fc">上海彪马服饰有限公司 </span>'+
                                        '</div>'+
                                    '</div>'+
                                    '<div class="bottom">'+
                                            '<span class="bottom-fc">订单号:</span>'+
                                            '<span class="bottom-fc fc">18493534</span>'+
                                            '<span class="order-type order-type_'+orderType+'">'+'未付款</span>'+
                                    '</div>'+
                                '</a>'+
                            '</div>'
                   
                 $('.section .content').last().after(_html1)
            }
            page++;
        },
        error:function(){
            alert('失败');
            $('#pullUp').hide();
        }
    })
}
getData('141',10);
function loadmore(obj){
        if(canPullUP){
            /**
 $(window).scrollTop()和$(document).scrollTop()具有相同的效果,都为返回滚动条的垂直位置,
    但是$(window).scrollTop()被所有浏览器支持。
    单独来说: 
    $(document)是获取文档对象 
    $(window)是获取窗口对象


    $(document).height()  //是获取整个页面的高度
    $(window).height()  //是获取当前 也就是你浏览器所能看到的页面的那部分的高度
    这个大小在你缩放浏览器窗口大小时 会改变 与document是不一样的  根据英文应该也能理解吧
    $(window).scrollTop() + $(window).height() = $(document).height()
    要获取顶端 只需要获取到scrollTop()==0的时候 就是顶端了

        要获取底端 只要获取scrollTop()>=$(document).height()-$(window).height() 
        就可以知道已经滚动到底端了
 */
                var scrollTop = $(obj).scrollTop(),
                scrollHeight = $(document).height(),
                windowHeight = $(obj).height();
            if(scrollTop + windowHeight >= scrollHeight-pullUpOffset){
                if(!stopScroll){
                    return
                }
                canPullUP=false;
                getData('141',10);
            }
        }
    }
    $(window).scroll(function (){
        if(!canPullUP){
            return
        }
        loadmore($(this));
    });


// 二期新增js 
    // 日历初始化
    function rangeBasicInit() {
        var instance = mobiscroll.range('#rangeBasic-demo', {
            theme: 'default',                                    
                lang: 'zh',                               
                display:'bottom',                         
            defaultValue: [new Date(), new Date()],
            onSet:function(event,inst){
                console.log(typeof event.valueText)
                var setTime=event.valueText.split("-");
                $('.begin-time').val(setTime[0]);
                $('.end-time').val(setTime[1]);
                console.log(setTime);
                // $('#calender').val(event.valueText);
                // var form = document.getElementById('date-form');
                // // 提交form:
                // console.log(inst)
                // setTimeout(() => {
                //     form.submit();

                // }, 5000);
            } 
        });    
    }
    rangeBasicInit()
})

 

转载于:https://www.cnblogs.com/MR-cui/p/10411913.html

参数说明 listLoadingMore({id:"",id2:function(){},action:function(){},pageNum:10,getNew:undefined,funcArg:undefined,func:function(){},loadingMustTime:0,loadingDom:function(){},loadedDom:function(){},nullDataFunc:function(){},endFunc:function(){},errorFunc:function(){}}); id:滚动条id,不可以是body; id2:滚动列表的id,通过function自行根据情况返回; action:数据来源的ajax地址,插件会自动加上page和length(分别表示请求页数和当前已有记录数),返回格式统一是[{},{}...],此类jsonArray; ajaxType:ajax提交方式,将更改传递数据的方式,默认post; pageNum:每页加载数量,将会根据这个数量判断是否全部加载完成; getNew:自定义获取数据方法; funcArg:自定义获取数据时传递的参数,类型为函数,返回所需参数; childrenTag:列表子项的标签,默认LI; func:非自定义获取数据时,创建每行数据的方法; loadingMustTime:强制最小加载时间,默认0; loadingDom:加载中动画自定义,返回Dom或者HTML代码; loadedDom:完全加载完成动画自定义,返回Dom或者HTML代码; nullDataFunc:数据列表为空时执行的方法; endFunc:每页数据加载完成时执行的方法; errorFunc:ajax获取数据失败时调用的方法。 回调方法 调用本方法初始化后将会得到一个专属的方法集: Object {getNew:function,isFull:function,isRunning:function,isStop:function,loading:function,show:function}; getNew():忽略判断条件,强制执行加载操作。此时数据传递中,page值可能出错,但length值一定正确,请谨慎判断后在执行该方法; isFull(boolean):修改列表加载完成标志。true为全部加载完成,false则相反; isRunning(boolean):修改列表当前是否正在加载中标志。几乎没有使用的机会; isStop(boolean):设置是否停止加载,设置为true时将会阻止未来的所有加载操作; loading():根据当前滚动条的位置,自动判断是否需要加载新数据; show(boolean,boolean):强制设置加载中和加载完成dom的显示或隐藏,true表示显示,false相对。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值