zoukankan      html  css  js  c++  java
  • JS 上拉加载

    $(document).ready( function(){
    $contentLoadTriggered = false;
    $("#mainDiv").scroll(function(){
    if($("#mainDiv").scrollTop() >= ($("#wrapperDiv").height() - 
       $("#mainDiv").height()) &&   $contentLoadTriggered == false)
       $contentLoadTriggered == false)
    {
    $contentLoadTriggered = true;
    $.ajax({
    type: "POST",
    url: "LoadOnScroll.aspx/GetDataFromServer",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    async: true,
    cache: false,
    success: function (msg) {
    $("#wrapperDiv").append(msg.d);
    $contentLoadTriggered = false;
    },
    error: function (x, e){
    alert("The call to the server side failed. " +
    x.responseText);
    }
    }
    );
    }
    }
    );
    }
    );
    

      

    var range = 50;             //距下边界长度/单位px
        var totalheight = 0; 
        var num ={$data|count};
        var is_load =true;
        var main = $("#con");                     //主体元素
        $(window).scroll(function(){
            var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)
            totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
            if(($(document).height()-range) <= totalheight && is_load == true) {
                if(num < 5 ){
                    return false;
                }       
                is_load = false;
                $("#loading").show();
                //alert("0000");
                 $.ajax({
                     url : '{:u("Index/post_json")}',
                     type : 'post',
                     data : {"num":num,"sch_time":sch_time,"city_from":city_from,"city_dst":city_dst},
                     dataType : 'json',
                     success : function(msg) {
                         //alert(msg);
                         $("#loading").hide();
                         myobj=eval(msg); 
                         
                         if(num == myobj['nums']){
                             alert("已经没有新订单了");
                             is_load = false;    //停止加载
                             return false;
                         }else{
                             num=myobj['nums'];
                         }
                         myobjs=myobj['data'];
                         for(var i=0;i<myobjs.length;i++){
                             ht='<div class="trip_li">';
                             ht+='<img class="hot" src="__ROOT__/Public/images/icon_hot.png">';
                             if(myobjs[i]['fleet'].join_uf == 1){
                                 ht+='<img class="uf" src="__ROOT__/Public/images/icon_uf.png">';
                             }
                             ht+='<button type="button" class="bespoke" onclick=javascript:window.location.href="'+"{:u('Index/order')}"+'/scid/'+myobjs[i].id+'">立即预约</button>';
                             ht+='<dl>';
                             ht+='<dt><font>'+myobjs[i].from_city+'</font> <img  src="__ROOT__/Public/images/icon_go.png" /> <font>'+myobjs[i].dst_city+'</font></dt>';
                             ht+='<dd>发车时间:<i class="times">'+myobjs[i].sch_time+'</i></dd>';
                             ht+='<dd>车型:'+myobjs[i]['fleet'].best_car+'</dd>';
                             ht+='<dd><i class="red">¥'+myobjs[i].money+'</i>    <i class="red">空位数: '+myobjs[i].used+'/'+myobjs[i].seat+'</i> </dd>';
                             ht+='</dl>';
                             ht+='</div>';
                             //alert(ht);
                              main.append(ht);
                              
                         } 
                         is_load =true; //恢复加载功能
                         
                     }
                 });
                
            }
        });
  • 相关阅读:
    一篇文章高效定位iframe
    URL与视图函数的映射
    include标签—引用文件路径
    UnitTest单元测试框架解析【实用篇】
    【案例演练】测试器与模板继承
    2招带你快速获取响应头与发送头
    dede网站如何更新地图sitemap.html
    申请微信小程序流程步骤
    phpstudy本地配置--dede织梦网
    stylus样式开发的使用----vue
  • 原文地址:https://www.cnblogs.com/zhangzhijian/p/7073331.html
Copyright © 2011-2022 走看看