简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

页面向下滚动ajax获取数据的实现方法(兼容手机)

来源:易贤网   阅读:1048 次  日期:2016-06-23 16:00:52

温馨提示:易贤网小编为您整理了“页面向下滚动ajax获取数据的实现方法(兼容手机)”,方便广大网友查阅!

下面小编就为大家带来一篇页面向下滚动ajax获取数据的实现方法(兼容手机)。小编觉得挺不错的,现在分享给大家,也给大家做个参考。

页面向下滚动ajax获取数据的实现方法(兼容手机)

$(window).scroll(function () {

      var scrollTop = $(this).scrollTop();

      var scrollHeight = $(document).height();

      var windowHeight = $(this).height();

      if (scrollTop + windowHeight >= scrollHeight) {

        loadPromotions();

      }

    });

   var page = 1;

   var morAvaliable = true;//标识还有数据可以加载

   function loadPromotions() {

    if (morAvaliable) {

      var href = location.href.split('?')[0];

      var pageSize = 5;

      page++;

      $.post(href,

        {

          pageNo: page,

          pageSize: pageSize

        }

        , function (data) {

          if (data.length) {

            var html = '';

            $.each(data, function (i, list) {

              html += '<div class="task-time">' + list.CreateTime + '</div>';

              html += '<a class="task-box" href="' + list.Url + '">';

              html += '<h5>' + list.Title + '</h5>';

            });

            $('#promotionList').append(html);

          }

          else {

            morAvaliable = false;

            $('#loading').html('没有更多分享信息了');

          }

        }

      );

    }

  }

以上这篇页面向下滚动ajax获取数据的实现方法(兼容手机)就是小编分享给大家的全部内容了,希望能给大家一个参考

更多信息请查看网络编程
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:倾力总结40条常见的移动端Web页面问题解决方案
下一篇:JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
易贤网手机网站地址:页面向下滚动ajax获取数据的实现方法(兼容手机)
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!