当前位置: 首页 > 编程笔记 >

jquery 实现滚动条下拉时无限加载的简单实例

松越
2023-03-14
本文向大家介绍jquery 实现滚动条下拉时无限加载的简单实例,包括了jquery 实现滚动条下拉时无限加载的简单实例的使用技巧和注意事项,需要的朋友参考一下

思路:

通过捕捉浏览器滚动条下拉事件,触发异步加载数据的js方法,实现数据的动态添加。

脚本:

var lastId=0;//记录每一次加载时的最后一条记录id,跟您的排序方式有关。

  var isloading = false;
  $(window).bind("scroll", function () {
    if ($(document).scrollTop() + $(window).height() 

       > $(document).height() - 10 && !isloading) {
      isloading = true;
      getMore();
    }
  });



function getMore() {
    var url = "ajaxdata.aspx"?lastId=" + lastId +"&type=" + 其他参数
    $.getJSON(url, function (data) { 
      var html="";

       ... ...

      $(html).insertAfter($(".elem").last());
      isloading = false;
    }

  }

以上这篇jquery 实现滚动条下拉时无限加载的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍Android简单实现无限滚动自动滚动的ViewPager,包括了Android简单实现无限滚动自动滚动的ViewPager的使用技巧和注意事项,需要的朋友参考一下 经常我们会在应用中看到一个可以自动滚动,并且无限滚动的一个ViewPager,百度谷歌上面也有很多关于这方面的教程,但是感觉都略显麻烦,而且封装的都不是很彻底。所以试着封装一个比较好用的ViewPager 效果如下: 简

  • 本文向大家介绍jquery无限级联下拉菜单简单实例演示,包括了jquery无限级联下拉菜单简单实例演示的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jquery无限级联下拉菜单代码以及jquery无限级联下拉菜单实现思路。分享给大家供大家参考。具体如下: 最终效果图: 因为是级联,所以数据必须是树型结构的,这里的测试数据如下: 看下效果图: 1、效果图一:   2、效果图二:   3、效

  • 本文向大家介绍jQuery实现简单二级下拉菜单,包括了jQuery实现简单二级下拉菜单的使用技巧和注意事项,需要的朋友参考一下 html代码 js代码 css代码 最好不要忘记插入jQuery js文件,最好下载最新的。 以上所述就是本文的全部内容了,希望大家能够喜欢。

  • 本文向大家介绍jQuery实现的无限级下拉菜单功能示例,包括了jQuery实现的无限级下拉菜单功能示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现的无限级下拉菜单功能。分享给大家供大家参考,具体如下: 运行效果图如下: 更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总

  • 本文向大家介绍jQuery实现无限往下滚动效果代码,包括了jQuery实现无限往下滚动效果代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现无限往下滚动效果的方法。分享给大家供大家参考,具体如下: 这是仿照腾讯的微薄上的一个效果。滚动条可以无限的网下滚动并且无刷不断从数据库中获取新的数据。 更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery切换特效与技

  • 本文向大家介绍jQuery实现下拉加载功能实例代码,包括了jQuery实现下拉加载功能实例代码的使用技巧和注意事项,需要的朋友参考一下 废话不多说了,直接给大家贴代码了,具体代码如下所示: 以上代码是小编给大家分享的jQuery实现下拉加载功能实例代码,希望对大家有所帮助!

  • 本文向大家介绍jQuery实现简单下拉导航效果,包括了jQuery实现简单下拉导航效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现简单下拉导航效果。分享给大家供大家参考。具体如下: 这里粗略做一款基于jquery的下拉导航菜单效果,我觉得挺不错,虽然没有怎么美化,但是代码易懂,另外修补的空间也比较大,相信对学习CSS以及jquery的朋友有不小的帮助。 运行效果截图如下

  • 本文向大家介绍JS简单实现无缝滚动效果实例,包括了JS简单实现无缝滚动效果实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS简单实现无缝滚动效果。分享给大家供大家参考,具体如下: 效果图如下: 更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》