完美手机列表页ajax数据请求加载方法以及请求事件记录；

完美手机列表页ajax数据加载方法，包括滚动加载、切换请求加载、loading的处理、加载完毕状态处理等，还有各种常见的bug处理

html的写法如下图：

<div class="fixed-box-parent">
    <ul class="ajax-data-js can-ajax fixed-box flex-center" data-url="/mdaoyou/TeamPlan/AjaxGetTeamPlanList" data-TeamStatus="0" data-AccountStatus="0" data-keyword="" data-TeamStartTime="" data-TeamEndTime="" data-AccountStartTime="" data-AccountEndTime="" data-index="1" data-pageSize="10">
        <li data-TeamStatus="0" class="item-each item-each-js active flex-one"><a href="javascript:void(0)">全部</a></li>
        <li data-TeamStatus="2" class="item-each item-each-js flex-one"><a href="javascript:void(0)">出团中</a></li>
        <li data-TeamStatus="1" class="item-each item-each-js flex-one"><a href="javascript:void(0)">未出团</a></li>
        <li data-TeamStatus="4" class="item-each item-each-js flex-one"><a href="javascript:void(0)">已回团</a></li>
        <li class="search-button search-button-js"><a class="icn-search-btn" href="javascript:void(0)"></a></li>
    </ul>
</div>
<div class="team-data-box loading-area">
    <ul class="append-data-box-js">
        <!--数据插入处-->
    </ul>
    <div class="loading-img loading-img-js"><i></i><span>加载中...</span></div>
    <div class="loading-img-end loading-img-end-js"><span>没有更多数据了</span></div>
</div>

具体的页面分别如下：

具体页面↑

搜索假页面↑

各种选择加载事件如下：

$(function(){
    //首次加载
    if($(".ajax-data-js").hasClass("can-ajax")){
        $(".append-data-box-js").empty(); 
        $(".loading-img-js").show();
        AjaxLoadTeamPlan(true,false);
    }
    //滚动加载
    $(window).scroll(function () {
        var scrollTop = $(window).scrollTop()-0;
        var windowHeight = $(window).height()-0;
        var pageHeight = $(document).height()-0;
        var $ajax=$(".ajax-data-js");
        var DivTop=$ajax.parent().offset().top-0;
        var HeaderHeight=$("header").height()-0;
        if(scrollTop+HeaderHeight>=DivTop){
            $ajax.addClass("do-fixed");
        }else{
            $ajax.removeClass("do-fixed");
        }
        //如果是第一页的时候防止滚动加载，避免重复请求
        if($ajax.attr("data-index")-0==1){
            return;
        }
        var scrollFlag=$("#pageContainer").css("display")=="none" ? true : false;//防止假页面出现触发scroll事件
        if ((scrollTop+ windowHeight > pageHeight-230)&&(!loadingFlag)&&(!scrollFlag)){
            loadingFlag=true;
            //滚动的时候也符合初始化的情况,所以要传参
            $(".loading-img-js").show();
            $(".loading-img-end-js").hide();
            AjaxLoadTeamPlan(false,true);
        }
    });

    //tab切换
    $(".item-each-js").on("click",function(){
        var self=$(this);
        self.siblings("li.active").removeClass("active");
        self.addClass("active");
        var TeamStatus=self.attr("data-TeamStatus");
        //切换的时候初始化对应的值
        $(".ajax-data-js").attr({
            "data-TeamStatus":TeamStatus,
            "data-AccountStatus":0,
            "data-TeamStartTime":"",
            "data-TeamEndTime":"",
            "data-AccountStartTime":"",
            "data-AccountEndTime":"",
            "data-keyword":"",
            "data-index":1        
        });
        //初始化加载数据，传参则为初始化
        AjaxLoadTeamPlan(true,false);
    })

    $(window).on("pageshow",function(){//解决scrollTop取值总为0的问题,解决已经滑动了一段距离刷新，浮层消失的情况
        var scrollTop = $(window).scrollTop()-0;
        var windowHeight = $(window).height()-0;
        var $ajax=$(".ajax-data-js");
        var DivTop=$ajax.parent().offset().top-0;
        var HeaderHeight=$("header").height()-0;
        //console.log(scrollTop,DivTop);
        if(scrollTop+HeaderHeight>=DivTop){
            $ajax.addClass("do-fixed");
        }else{
            $ajax.removeClass("do-fixed");
        }

    })

    //搜索假页面
    $(".search-button-js").on("click",function(){
        utilsMobile.showFullPage("search-layer-js","pageContainer");
    })
    //搜索出团状态选中
    $(".list-state-contain-js >li").on("click",function(){
        var self=$(this);
        self.siblings("li.active").removeClass("active");
        self.addClass("active");
        $(".search-data-hidden-js").attr("data-TeamStatus",self.attr("data-TeamStatus"));
    })
    //搜索报账状态选中
    $(".state-type-contain-js >li").on("click",function(){
        var self=$(this);
        self.siblings("li.active").removeClass("active");
        self.addClass("active");
        $(".search-data-hidden-js").attr("data-AccountStatus",self.attr("data-AccountStatus"));
    })
    //出团日期选择
    $(".start-team-date-js").dateSelector({
        allowPastDay:true,
        maxDate:$(".end-team-date-js").val(),
        callback:function(dateStr){
            if((new Date(dateStr.replace(/[-]/g,"/")))>(new Date($(".end-team-date-js").val().replace(/[-]/g,"/")))){
                $(".end-team-date-js").val(dateStr);
                $(".search-data-hidden-js").attr("data-TeamEndTime",dateStr);
            }
            $(".end-team-date-js").dateSelector("destroy");
            SearchTeamEndDate();
            $(".search-data-hidden-js").attr("data-TeamStartTime",$(".start-team-date-js").val());
        }
    });
    var SearchTeamEndDate=function(){
        $(".end-team-date-js").dateSelector({
            allowPastDay:true,
            minDate:$(".start-team-date-js").val(),
            callback:function(dateStr){
                $(".search-data-hidden-js").attr("data-TeamEndTime",$(".end-team-date-js").val());
            }
        });
       }
    SearchTeamEndDate();
    //报账日期选择
    $(".start-account-date-js").dateSelector({
        allowPastDay:true,
        maxDate:$(".end-account-date-js").val(),
        callback:function(dateStr){
            if((new Date(dateStr.replace(/[-]/g,"/")))>(new Date($(".end-account-date-js").val().replace(/[-]/g,"/")))){
                $(".end-account-date-js").val(dateStr);
                $(".search-data-hidden-js").attr("data-AccountEndTime",dateStr);
            }
            $(".end-account-date-js").dateSelector("destroy");
            SearchAccountEndDate();
            $(".search-data-hidden-js").attr("data-AccountStartTime",$(".start-account-date-js").val());
        }
    });
    var SearchAccountEndDate=function(){
        $(".end-account-date-js").dateSelector({
            allowPastDay:true,
            minDate:$(".start-account-date-js").val(),
            callback:function(dateStr){
                $(".search-data-hidden-js").attr("data-AccountEndTime",$(".end-account-date-js").val());
            }
        });
       }
    SearchAccountEndDate();
    //确定搜索
    $(".sure-search-js").on("click",function(){
        var $ajax=$(".ajax-data-js");
        var $hidden=$(".search-data-hidden-js");
        $ajax.attr("data-TeamStatus",$hidden.attr("data-TeamStatus"));
        $ajax.find("li.item-each-js").each(function(){
            var self=$(this);
            var dataListType=self.attr("data-TeamStatus");
            if(dataListType==$hidden.attr("data-TeamStatus")){
                //选中列表对应状态
                self.siblings(".active").removeClass("active");
                self.addClass("active");
            }
        })
        $ajax.attr({
            "data-index":1,
            "data-TeamStatus":$hidden.attr("data-TeamStatus"),
            "data-AccountStatus":$hidden.attr("data-AccountStatus"),
            "data-TeamStartTime":$hidden.attr("data-TeamStartTime"),
            "data-TeamEndTime":$hidden.attr("data-TeamEndTime"),
            "data-AccountStartTime":$hidden.attr("data-AccountStartTime"),
            "data-AccountEndTime":$hidden.attr("data-AccountEndTime")
        })
        $ajax.removeClass("do-fixed");//已经滚动一短距离再去搜索要先去掉悬浮
        window.history.go(-1);
        AjaxLoadTeamPlan(true,false);
    })
    //清空条件
    $(".clear-chose-init-js").on("click",function(){
        $(".list-state-contain-js >li").removeClass("active");
        $(".list-state-contain-js >li:first").addClass("active");
        $(".state-type-contain-js >li").removeClass("active");
        $(".state-type-contain-js >li:first").addClass("active");
        $(".start-team-date-js").val("");
        $(".end-team-date-js").val("");
        $(".start-account-date-js").val("");
        $(".end-account-date-js").val("");
        $(".search-data-hidden-js").attr({
            "data-index":1,
            "data-TeamStatus":0,
            "data-AccountStatus":0,
            "data-TeamStartTime":"",
            "data-TeamEndTime":"",
            "data-AccountStartTime":"",
            "data-AccountEndTime":""
        });
    })
})

template.helper('dateFormate', function (value) {
    // do something...
    if(new Date(value) < new Date()){
        return true;
    }
    return false;
});

var loadingFlag=false;//防止滚动重复请求
var AjaxRequestWholeVar;//请求的全局变量;用于终止ajax请求
//这里通过传参与不传参来区分是否是初始化的状态，IsInit是初始化情况,flagScroll是滚动情况
function AjaxLoadTeamPlan(IsInit,flagScroll){
    var $AjaxStateBox=$(".ajax-data-js");
    var $loading=$(".loading-img-js");
    var $loadingEnd=$(".loading-img-end-js");
    var TeamStatus=$AjaxStateBox.attr("data-TeamStatus")-0;
    var AccountStatus=$AjaxStateBox.attr("data-AccountStatus")-0;
    var dataKeyword=$AjaxStateBox.attr("data-keyword");
    var TeamStartTime=$AjaxStateBox.attr("data-TeamStartTime").replace(/[-]/g,"/");
    var TeamEndTime=$AjaxStateBox.attr("data-TeamEndTime").replace(/[-]/g,"/");
    var AccountStartTime=$AjaxStateBox.attr("data-AccountStartTime").replace(/[-]/g,"/");
    var AccountEndTime=$AjaxStateBox.attr("data-AccountEndTime").replace(/[-]/g,"/");
    //不传参 搜索状态的时候要将页码变回1
    if(IsInit){
        $AjaxStateBox.attr("data-index",1);
        $loadingEnd.hide().removeClass("no-more-data");
    }
    //如果是第一页的时候防止滚动加载，避免重复请求
    if(flagScroll){
        if($AjaxStateBox.attr("data-index")-0==1){
            return;
        }
    }
    var index=$AjaxStateBox.attr("data-index")-0;
    var pageSize=$AjaxStateBox.attr("data-pageSize")-0;
    var Ajaxurl=$AjaxStateBox.attr("data-url");

    var data={"TeamStatus":TeamStatus,"AccountStatus":AccountStatus,"TeamStartTime":TeamStartTime,"TeamEndTime":TeamEndTime,"AccountStartTime":AccountStartTime,"AccountEndTime":AccountEndTime,"Page":index,"PageSize":pageSize};
    if(!$loadingEnd.hasClass("no-more-data")){
        AjaxRequestWholeVar=$.ajax({
            url:Ajaxurl,
            type:'post',
            data:data,
            beforeSend:function(){
                if(IsInit){

                    //非滚动事件先清空列表再加载
                    $(".append-data-box-js").empty();
                    if(AjaxRequestWholeVar){
                        AjaxRequestWholeVar.abort();//如果同时有多次请求，只保留最后一次请求，防止发生数据不对应的问题
                    }
                                        $loading.show();//一定要放在AjaxRequestWholeVar之后
                }            
            },
            success:function(msg){
                console.log(msg);
                if(msg && (msg.Code==0)&& (msg.TotalCount>0) && AjaxRequestWholeVar){
                    loadingFlag=false;
                    var maxPage=Math.ceil(msg.TotalCount/($AjaxStateBox.attr("data-pageSize")-0));
                    var currentPage=$AjaxStateBox.attr("data-index")-0;
                    if(msg.Data && msg.Data.length>0 && currentPage<=maxPage){
                        $AjaxStateBox.attr("data-index",$AjaxStateBox.attr("data-index")-0+1);
                        var Data=msg.Data;
                        //总数赋值
                        $(".total-plan-js").text(Data[0].TotalRecord);
                        $(".total-loan-js").text(Data[0].TotalGuideLoanAmount);
                        $(".total-colection-js").text(Data[0].TotalGuideCollectionAmount);
                        $(".total-settle-js").text(Data[0].TotalGuideSettlementAmount);

                        var itemhtml='列表模板';

                                //多条数据一起解析出来,上面已经是循环
                        var html =utils.renderTemplate(itemhtml,msg);// 用 js 模板解析 json 数据为 html
                        //console.log(html);
                            $(".append-data-box-js").append(html)
                            //加载成功隐藏加载图标(加上ajax后请将这个打开)

                            //四个充满的时候,按钮排列
                            $(".link-btn-box-js").each(function(){
                                var self=$(this);
                                if(self.hasClass("had-check-flex")){
                                    return true;
                                }
                                self.addClass("had-check-flex");
                                if(self.find("a").length>=4){
                                    self.find("a").removeClass("self-adaptation").addClass("flex-one");
                                }

                            })

                            $loading.hide();                    
                            if(currentPage==maxPage){
                                $loading.hide();
                                $loadingEnd.show().addClass("no-more-data");
                            }
                    }
                }else if((msg.Code==0)&&(msg.TotalCount==0)){
                    var html='未找到符合条件的数据…';
                    $(".append-data-box-js").append(html);
                    $loading.hide();
                    $loadingEnd.hide().addClass("no-more-data");
                }else{
                    $loading.hide();
                    $loadingEnd.show().addClass("no-more-data");
                }
            },
            error:function(msg){
                console.log(msg);
            },
            complete:function(e){
                $loading.hide();
            }
        })
    }else{
        $loading.hide();
        $loadingEnd.show().addClass("no-more-data");
    }
}