jQuery实现滚动到底部时自动加载更多的方法示例


Posted in jQuery onFebruary 18, 2018

本文实例讲述了jQuery实现滚动到底部时自动加载更多的方法。分享给大家供大家参考,具体如下:

这里利用AJAX,实现滚动到底加载数据功能:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <script src="js/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      AddSth();
    });
    $(function () {
      $(".main").unbind("scroll").bind("scroll", function (e) {
        var sum = this.scrollHeight;
        if (sum <= $(this).scrollTop() + $(this).height()) {
          AddSth();
        }
      });
    });
    function AddSth() {
      $.ajax({
        type: 'POST',
        url: "index.aspx/ReturnSth",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        //data: "",
        success: function (data) {
          json = $.parseJSON(data.d);
          for (var i in json) {
            var tbBody = "<ul><li>" + json[i].sth + "</li></ul>";
            $(".main").append(tbBody);
          }
          $(".main").append("<hr />");
        }
      });
    }
  </script>
</head>
<body>
  <form id="form1" runat="server">
    <div>下拉加载更多</div><br />
    <div class="main" style="border: 1px solid red; height: 700px; overflow: auto;"></div>
  </form>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 #jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 #jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 #jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 #jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 #jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 #jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 #jQuery
You might like
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
jquery中this的使用说明
2010/09/06 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
node.js中的socket.io的广播消息
2014/12/15 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
javascript实现日期按月份加减
2015/05/15 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
Python标准库之Sys模块使用详解
2015/05/23 Python
RC4文件加密的python实现方法
2015/06/30 Python
浅谈Python中的私有变量
2018/02/28 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
python实现无边框进度条的实例代码
2020/12/30 Python
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
EJB发布WEB服务一般步骤
2012/10/31 面试题
试用期转正鉴定评语
2014/01/27 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
学习保证书100字
2015/02/26 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
运动会加油稿
2015/07/22 职场文书
关于远足的感想
2015/08/10 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript