触屏分页

触屏分页，滚动条到底分页，加载中。。。加动态数据。

1、滚动条符合条件到底时page++，累积分页数

maxPage = parseInt( $("#total_page").val() );//通过页面，后台传值

var page = 1;
var b_ok = true;
/**
 * 滚动条到达底部  加载列表下一页
 * b_ok --> 开关,触底时需要判断是否为重复数据
 * */
function scroll_bottom(){
    $(window).scroll(function(){
        var scrollTop = $(this).scrollTop(),
        scrollHeight = $(document).height(),
        windowHeight = document.body.offsetHeight+1000;
        if(scrollTop + windowHeight >= scrollHeight && b_ok){
            console.log(b_ok);
            page++;
            b_ok = false;
　　　　　　　//有数据时可分页，maxPage后台接口给的值
            if ($(".noData.noCP").is(":hidden") ) {
                console.log(page,maxPage)
                if (page <= maxPage) {
                    $(".is_loading").show();//加载中。。。
                    get_list_data(page);　　//请求数据接口，每次分页请求一次接口
                } else {
                    $('.is_loading').hide();
                    $('.no_data').show();　 //已经全部显示
                }
            }
        }
    });
}

2、请求接口数据

    //分页加载内容
    function get_list_data(page){
        var url = com.url.gailvtest;
        //加载数据
        $(".back_loading").show();　　//屏幕加载动画
        $.get(url,{page:page},function(res){
            if(res.status == 'true'){
                console.log(res.data);
                var list = res.data.list;
                maxPage = res.data.total_page;
                if (res.data.list.length>0) {
                    console.log(res.data.list);
                    html = get_list_html(res.data.list);
                    $(".back_loading").hide();
                    $("#new_html404").hide();
                    $('.no_data').hide();
                    $('.is_loading').hide();
                    b_ok = true;　　//很重要
                }else if(res.data.list.length=='0'){
                    $("#new_html404").show(); //空数据效果图
                    $(".back_loading").hide();
                }
                $('#dataList').append(html); //分页数据累加，
            }else {
                $('.is_loading').hide();//加载中 文字
                $('.no_data').show();
            }
        })
    }

 

3、字符串拼接

//接口数据载入
    function get_list_html(list){
        var html='';
        var schoolHtml = '';
        for(var i=0,len = list.length;i<len;i++){
            list_data.push(list[i]);//
            schoolHtml = '';
            var schRes = list[i].school_result;
            for(var j=0;j<schRes.length;j++){
                schoolHtml+=
                '<ul class="school_list" id="cpData">'+
                    '<li class="school-info">'+
                        '<div class="schoolData">'+
                            '<div class="fl leftimg" style="flex-shrink: 0;">' +
                            '<img src="'+schRes[j].school_thumb+'"/>'+
                        '</div>' +
                        '<div class="fl school_text" style="flex-shrink: 1;">' +
                            '<div class="toptext">' +
                                '<p class="cn showoneWrap">'+schRes[j].school_cn_name+'</p>' +
                                '<p class="en showtwoWrap">'+schRes[j].school_en_name+'</p>' +
                            '</div>' +
                        '</div>' +
                        '<div class="result fl">' +
                            '<p class="result_fen">'+schRes[j].gailv_result+'%</p>' +
                            '<p class="result_yuan">'+schRes[j].wenan+'</p>' +
                        '</div>' +
                        '</div>' +
                    '</li>' +
                '</ul>';
            }
            html +=
            '<div class="dataItems">'+
                    '<div class="divice20"></div>'+
                    '<p class="tifo"><i></i><span class="code">'+list[i].number+'</span><span class="time">'+time_conversion(list[i].create_time,1)+'</span></p>'+
                        schoolHtml +
                    '<p><a href="/abroadtool/successtest/gailv_result?gailv_id='+list[i].id+'"  class="lookdetails">查看详情</a></p>' +
            '</div>';
        }
        return html;
    }

 

标签：分页,res,list,html,var,data,page,触屏
来源： https://www.cnblogs.com/liubingyjui/p/10395442.html