UDN-企业互联网技术人气社区

板块导航

浏览  : 599
回复  : 4

[jQuery] asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类...

[复制链接]
西北的风的头像 楼主
  腾讯微博提供两种加载数据的方式,一种是分页,一种是滚动浏览器滚动条加载数据,分页功能我想大家都做得太多了,今天我与大家分享一下我用滚动条滚动加载数据

  自从腾讯微博上线以来,基本上就开始用了,一直到现在,作为一个开发人员,也看到了腾讯微博一直在不停的改变,也不知道大家有没有发现,腾讯微博提供两种加载数据的方式,一种是分页,一种是滚动浏览器滚动条加载数据,分页功能我想大家都做得太多了,今天我与大家分享一下我用滚动条滚动加载数据
  
  下面开讲:
  
  首先说一下思路,我用的是Jquery,然后通过Jquery的ajax()方法通过 HTTP 请求加载远程数据来实现的,用到Jquery,首先要应用jquery.min.js类库,如果本地没有,也可以直接引用下面地址<script type="text/JavaScript" src="http://ajax.googleAPIs.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>。
  
  好吧,下面我们看下核心代码:
  
  复制代码 代码如下:

  1. // - -!,你懂的.
  2. var count=<%=allcount %>;
  3. var times=0;
  4. var loaded = true;
  5. function Add_Data()
  6. {
  7. var top = $("#main_left_add").offset().top;
  8. if(loaded && ($(window).scrollTop() + $(window).height() > top))
  9. {
  10. $("#main_left_add").html("数据加载中...");
  11. times++;
  12. $.ajax(
  13. {
  14. type: "POST",
  15. dataType: "text",
  16. url: "weibo.ashx",
  17. data: "userid="+<%=hf.Value %>+"&touserid="+<%=hf1.Value %>+"&count="+count+"×="+times+"&type=1",
  18. success: function(data)
  19. {
  20. //alert("第"+times+"次追加数据.");
  21. if(data == "没有数据")
  22. {
  23. $("#main_left_add").css("display","none");
  24. loaded=false;
  25. AddEffect();
  26. }
  27. else if(data == "")
  28. {
  29. $("#main_left_add").html("点击加载更多...");
  30. $("#main_left_add").css("display","block");
  31. loaded=false;
  32. AddEffect();
  33. }
  34. else if(data != "")
  35. {
  36. $("#main_left_down").append(data);
  37. AddEffect();
  38. }
  39. }
  40. }
  41. );
  42. }
  43. }
  44. $(window).scroll(Add_Data);
  45. //点击追加数据
  46. $("#main_left_add").click(function(){
  47. $.ajax({
  48. type: "POST",
  49. dataType: "text",
  50. url: "weibo.ashx",
  51. data:"userid="+<%=hf.Value %>+"&touserid="+<%=hf1.Value %>+"&count="+count+"×="+times+"&type=2",
  52. success: function(data){
  53. if(data=="没有数据")
  54. {
  55. $("#main_left_add").css("display","none");
  56. AddEffect();
  57. }
  58. else
  59. {
  60. $("#main_left_down").append(data);
  61. $("#main_left_add").html("点击加载更多...");
  62. AddEffect();
  63. }
  64. }
  65. });
  66. //鼠标移动效果
  67. $("#main_left_add").mouseover(function(){
  68. $(this).css("background-color","#e4eef8");
  69. });
  70. $("#main_left_add").mouseout(function(){
  71. $(this).css("background-color","#f0f5f8");
  72. });
复制代码
 
  这是前台js代码,下面我稍微的解释一下代码:count是定义的数据总数,定义两个div,一的div用来追加数据,一个div用来判断滚动条的位置,再建一个*.ashx文件用来处理程序并返回相应的数据,根据此数据我们肯定判断加载情况,滚动追加完成后我还多加了一个"点击加载更多的功能...",此功能实现也与上面差不多...代码都在上面,供大家参考。
  
  注意:为了防止滚动事件一直会被执行,所以才定义了一个loaded来控制滚动事件的执行。

相关帖子

发表于 2016-7-27 15:58:33 | 显示全部楼层
又见楼主分享帖子
使用道具 举报

回复

发表于 2016-7-27 15:58:33 来自手机 | 显示全部楼层
js是要逆天的节奏js虽然不错,但是天生也是有缺陷,局限性。。。
使用道具 举报

回复

发表于 2016-7-27 15:58:34 | 显示全部楼层
我是被标题吸引进来的
使用道具 举报

回复

发表于 2017-8-31 10:27:16 | 显示全部楼层
技术贴,干货
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部