• 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; //恢复加载功能
                         
                     }
                 });
                
            }
        });
  • 相关阅读:
    已经菜到不行了 PAT 1010. Radix (25)
    容斥 或者 单调栈 hihocoder #1476 : 矩形计数 和 G. Snake Rana 2017 ACM Arabella Collegiate Programming Contest
    React的Context的使用方法简介
    canvas的进阶
    canvas的基础入门
    CSS3 中弹性盒模型--容器的属性
    creat-react-app搭建的项目中按需引入antd以及配置Less和如何修改antd的主题色
    D3.js 动画 过渡效果 (V3版本)
    D3.js(v3)+react 制作 一个带坐标轴与比例尺的折线图
    D3.js 弦生成器(V3版本)
  • 原文地址:https://www.cnblogs.com/zhangzhijian/p/7073331.html
Copyright © 2020-2023  润新知