近期在做一个H5网站,需要下拉加载更多产品列表的功能。百度搜索了好久,什么说法都有,什么插件都有。   醉了。基本上每一个能直接拿来用的。

最后发现:

1、dropload.js 插件  还可以,但是有个问题,只能单页使用比较方便。带有tab标签的不推荐使用。

2、自己百度了半天总结出来的一套:

  1. <script>
  2. document.addEventListener('scroll', watchScroll);
  3. var itemIndex = 0;
  4. var classid = 10;
  5. var isloading = 0;//防止无限滚动加载
  6. var page = $("#page").val();//页码
  7. loadDataDynamic();//加载数据
  8. $(function () {
  9. $('.tab').bind('click', function () {// tab导航绑定点击事件
  10. document.body.scrollTop = 0;//首先复位顶部
  11. var $this = $(this);
  12. itemIndex = $this.index();
  13. $this.addClass('weui_bar_item_on c_f8').siblings('.tab').removeClass('weui_bar_item_on c_f8');//添加选中样式
  14. $('.itme').eq(itemIndex).show().siblings('.itme').hide(); //切换显示div
  15. classid = this.attributes.dataid.value;
  16. page = 1;//页数复位
  17. loadDataDynamic();
  18. });
  19. });
  20.  
  21. //加载数据
  22. function loadDataDynamic() {
  23. //先显示正在加载中
  24. if ($("#loadingLi").length === 0)
  25. $(".itme:visible>ul").append("<p id='loadingLi' class='loading'>正在加载...</p>");
  26. else {
  27. $("#loadingLi").text("正在加载...").removeClass("space");
  28. }
  29. var loadingLi = document.getElementById("loadingLi");
  30.  
  31. var msg = "";
  32. $.ajax({
  33. url: "/Handler/xxx.aspx?cmd=GetGameListByClass",
  34. type: "get",
  35. async:false,
  36. data: { classid: classid, page: page },
  37. dataType: "json",
  38. beforeSend: function () { isloading = 1; },
  39. success: function (data) {
  40. if (data.r) {
  41.             //这边根据自己的展示需求来 修改一下。
  42. if (page == "1") {
  43. // 插入数据到页面
  44. $('.itme:visible>ul').html(decodeURIComponent(data.r));
  45. msg = "数据已加载到底了.";
  46. } else {
  47. $('.itme:visible>ul').append(decodeURIComponent(data.r));
  48. }
  49. $("#page").val(page++);
  50. isloading = 0;
  51. } else {
  52. $(".itme:visible>ul").scrollTop(document.body.scrollTop - 20);
  53. if (page == 1) {
  54. $(".itme:visible>ul").html("<div class=\"zwsj\" ><p>暂无数据</p></div>");
  55. } else {
  56. msg = "数据已加载到底了";
  57. }
  58. }
  59. $(".itme:visible>ul").append(loadingLi);
  60. },
  61. error: function (xmlHttpRequest, textStatus, errorThrown) {
  62. msg = "数据加载失败!";
  63. }, complete: function () {
  64. if (page > 1) {
  65. $("#loadingLi").text(msg);
  66. } else {
  67. $("#loadingLi").text("");
  68. }
  69. }
  70. });
  71. }
  72.  
  73. //如果滚动条滚动到页面底部,需要加载新的数据,并且显示加载提示
  74. function watchScroll() {
  75. if (!isScrollToPageBottom()) {
  76. return;
  77. }
  78. loadDataDynamic();
  79. }
  80. //作为一个对象的w和h属性返回视口的尺寸
  81. function getViewportSize(w) {
  82. //使用指定的窗口, 如果不带参数则使用当前窗口
  83. w = w || window;
  84. //除了IE8及更早的版本以外,其他浏览器都能用
  85. if (w.innerWidth != null)
  86. return { w: w.innerWidth, h: w.innerHeight };
  87. //对标准模式下的IE(或任意浏览器)
  88. var d = w.document;
  89. if (document.compatMode == "CSS1Compat")
  90. return { w: d.documentElement.clientWidth, h: d.documentElement.clientHeight };
  91.  
  92. //对怪异模式下的浏览器
  93. return { w: d.body.clientWidth, h: d.body.clientHeight };
  94. }
  95. //检测滚动条是否滚动到页面底部
  96. function isScrollToPageBottom() {
  97. //文档高度
  98. var documentHeight = document.documentElement.offsetHeight;
  99. var viewPortHeight = getViewportSize().h;
  100. var scrollHeight = window.pageYOffset ||
  101. document.documentElement.scrollTop ||
  102. document.body.scrollTop || 0;
  103.  
  104. return (documentHeight - viewPortHeight - scrollHeight < 20)&& isloading == 0;//这个蛮重要的
  105. }
  106. </script>

写的有不足的地方可以指出来,后期优化。

效果图展示:  真实案例

参考来源 : http://www.cnblogs.com/w-wanglei/p/5863387.html

H5页面下拉加载更多(实用版)的更多相关文章

  1. H5 页面下拉加载更多

    1.html页面: <body onload="index_roll()"> ... </body> 2.js <script type=" ...

  2. ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

    闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...

  3. jquery实现下拉加载更多

    下拉加载更多这种原理很容易想明白,但是不自己写一个简单的,老是不踏实,获取什么高度再哪里获取之类的.于是自己简单写了个,就是页面上有几个div,然后当滚动条拉到某个位置的时候,再继续加载div.顺便又 ...

  4. 下拉加载更多DEMO(js实现)

    项目的一个前端页面展示已购买商品时,要求能下拉加载更多.花了点时间研究这个功能,以前没做过. 首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判 ...

  5. 微信小程序实现上拉和下拉加载更多

    在上一篇文章中,我们知道了使用 scroll-view 可以实现上拉加载更多,但是由于 scroll-view 的限制,它无法实现下拉加载更多,这篇文章我们使用 view 组件来实现 上拉和下拉加载更 ...

  6. Windows Phone 8.1开发:如何让ListView下拉加载更多?

    Windows Phone 8.1开发中使用ListView作为数据呈现载体时,经常需要一个下拉(拇指向上滑动)加载更多的交互操作.如何完成这一操作呢?下面为您阐述. 思路是这样的: 1.在ListV ...

  7. iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战

    上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...

  8. dropload.js下拉加载更多

    项目中有用到下拉加载更多的地方,去网上找了一个插件,地址:http://ons.me/526.html总体还是不错的,可能自己不是特别了解这个插件,做项目时,也是遇到了无数问题.项目中要用的是两个ta ...

  9. JQ下拉加载更多

    <!DOCTYPE=html> <html> <head> <script src="jquery-1.4.2.min.js" type= ...

随机推荐

  1. Hadoop集群的各部分常用端口

    hadoop集群的各部分一般都会使用到多个端口,有些是daemon之间进行交互之用,有些是用于RPC访问以及HTTP访问.而随着hadoop周边组件的增多,完全记不住哪个端口对应哪个应用,特收集记录如 ...

  2. eclipse调整字体大小

    window->preferences->general->appearance->colors and fonts-> 双击Text Font 就调整字体大小了

  3. JAVA垃圾回收机

    垃圾回收基本算法 串型回收和并行回收 串行回收始终在一个CPU上执行回收操作.并行回收则将回收任务分为好几步,每步使用不同的CPU执行,这样加快了执行速度,有点像流水线作业. 并发执行和暂停应用程序 ...

  4. 转载:逻辑回归的python实现

    转载自:http://blog.csdn.net/zouxy09/article/details/20319673 一.逻辑回归(LogisticRegression) Logistic regres ...

  5. 微信公众平台Java版极速SDK

    JEEWX-API 是第一个微信公众平台Java版极速SDK,基于 jeewx-api 开发可以立即拥有简单易用的API,让开发更加轻松自如,节省更多时间 http://www.jeewx.com/

  6. linux中uptime命令获取主机运行时间和查询系统负载信息

    系统中的uptime命令主要用于获取主机运行时间和查询linux系统负载等信息.uptime命令可以显示系统已经运行了多长时间,信息显示依次为:现在时间.系统已经运行了多长时间.目前有多少登陆用户.系 ...

  7. JS答辩习题

    php高中班javascript答辩题目 1 什么是javascript?  答:Javascript是一种专门设计用来增强网页交互性的脚本语言,它也是一种解释型语言. 2 Javascript与C语 ...

  8. 激活webstorm(作为一个伪前端,偶尔用用)

    推荐博客:https://blog.csdn.net/voke_/article/details/76418116 我试的方法一.

  9. FileSystemWatcher监听文件是否有被修改

    作用:监听文件系统更改通知,并在目录或目录中的文件更改时引发事件. 需求:监听特定文件是否修改,然后做出相应的操作. 方法: ①利用一个线程,一直去查找该指定的文件是否有被修改,如果修改则操作特定步骤 ...

  10. Tomcat的工作模式和运行模式

    (1)工作模式 Tomcat作为servlet容器,有三种工作模式: 1.独立的servlet容器,servlet容器是web服务器的一部分: 2.进程内的servlet容器,servlet容器是作为 ...