js上拉加载

来源：互联网发布：2016淘宝最大的店铺编辑：程序博客网时间：2024/06/08 14:15

页面

<body><div class="header">    <h1><button class="button" type="button" onclick="javascript:history.go(-1)"><</button>更多房产列表</h1></div><div class="content">    <ul id="ul">    </ul></div></body>

<script type="text/javascript">$(function() {      var pageCurrent = 1;      var ul = $('#ul');      /* innerheight 返回窗口的文档显示区的高度。      innerwidth 返回窗口的文档显示区的宽度。 */      var innerHeight = window.innerHeight;      var timer2 = null;      $.ajax({        url: '/before/list!moreHouses',        type: 'post',        data: {"pageCurrent":pageCurrent},         dataType: 'json',        timeout: '1000',        //cache 这个cache有true和false两个方向,true表示当前请求有缓存，一般不推荐true，因为ajax是实时请求数据        cache: 'false',        success: function (data) {            var houses = data.records;            if (houses.length != 0) {              var arrText = [];              for (var i = 0; i < houses.length; i++) {                //push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。                arrText.push('<li class="list">');                arrText.push('<a href="/before/list!details?id='+houses[i].id+'" class="clearfix">');                    arrText.push('<div class="pic">');                            arrText.push('<img src="' + houses[i].img + '">');                    arrText.push('</div>');                    arrText.push('<div class="text">');                        arrText.push('<h2 class="ip5-lineHeight">' + houses[i].title + '</h2>');                        arrText.push('<div class="middle clearfix">');                            arrText.push('<span>' + houses[i].location + '');                                arrText.push('<i class="price">' + FormatDate(houses[i].create_date)  + '</i>');                            arrText.push('</span>');                        arrText.push('</div>');                    arrText.push('</div>');                  arrText.push('</a>');                arrText.push('</li>');              }              /* join() 方法用于把数组中的所有元素放入一个字符串。                元素是通过指定的分隔符进行分隔的。                默认是逗号为分隔符 */                ul.html(arrText.join(''));            };            var ajax_getting = false;            //scroll当页面滚动时触发的　            $(window).scroll(function() {              clearTimeout(timer2);              //setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。              timer2 = setTimeout(function() {                var scrollTop = $(document.body).scrollTop();　　                var scrollHeight = $('body').height();　　                var windowHeight = innerHeight;                var scrollWhole = Math.max(scrollHeight - scrollTop - windowHeight);                if (scrollWhole < 100) {                  if (ajax_getting) {                    return false;                  } else {                    ajax_getting = true;                  }                 /*  discount.append('<div class="load"><img src="/lightapp/static/zhida-yunying/img/load.gif" width="6%" /></div>'); */                  $('html,body').scrollTop($(window).height() + $(document).height());                  pageCurrent++;                  $.ajax({                    url: '/before/list!moreHouses',                    type: 'post',                    data: {"pageCurrent":pageCurrent},                    dataType: 'json',                    success: function (data) {                      var houses = data.records;                      if (houses.length != 0) {                        var arrText = [];                        for (var i = 0; i < houses.length; i++) {                            //push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。                            arrText.push('<li class="list">');                            arrText.push('<a href="/before/list!details?id='+houses[i].id+'" class="clearfix">');                                arrText.push('<div class="pic">');                                        arrText.push('<img src="' + houses[i].img + '">');                                arrText.push('</div>');                                arrText.push('<div class="text">');                                    arrText.push('<h2 class="ip5-lineHeight">' + houses[i].title + '</h2>');                                    arrText.push('<div class="middle clearfix">');                                        arrText.push('<span>' + houses[i].location + '');                                            arrText.push('<i class="price">' + FormatDate(houses[i].create_date) + '</i>');                                        arrText.push('</span>');                                    arrText.push('</div>');                                arrText.push('</div>');                              arrText.push('</a>');                            arrText.push('</li>');                        }                        ul.append(arrText.join(''));                        /*$(".load").remove(); */                      } else {                        /* $(".load").remove(); */                        ul.append('<div class="no-data">没有更多数据。</div>');                        $(window).unbind('scroll');                      };                      ajax_getting = false;                    }                  });　　                };                /* $(".load").remove(); */              }, 200);            });          },          error: function (data) {          }      })      /* $(window).bind("orientationchange", function() {        $('.sliders').css('left',$(window).width() / 2 +'px');      }) */    })</script><script type="text/javascript">    /* Date.prototype.Format = function (fmt) { //author: meizz         var o = {            "M+": this.getMonth() + 1, //月份             "d+": this.getDate(), //日             "h+": this.getHours(), //小时             "m+": this.getMinutes(), //分             "s+": this.getSeconds(), //秒             "q+": Math.floor((this.getMonth() + 3) / 3), //季度             "S": this.getMilliseconds() //毫秒         };        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));        for (var k in o)        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));        return fmt;    } */    function FormatDate (strTime) {        var date = new Date(strTime);        return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"  "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();    }</script>

阅读全文

0 0