pullrefresh_sub.html 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Hello MUI</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <link rel="stylesheet" href="../css/mui.min.css">
  10. </head>
  11. <body>
  12. <!--下拉刷新容器-->
  13. <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
  14. <div class="mui-scroll">
  15. <!--数据列表-->
  16. <ul class="mui-table-view mui-table-view-chevron">
  17. <li class="mui-table-view-cell">
  18. <a href="" class="mui-navigate-right">Item 1</a>
  19. </li>
  20. <li class="mui-table-view-cell">
  21. <a href="" class="mui-navigate-right">Item 2</a>
  22. </li>
  23. <li class="mui-table-view-cell">
  24. <a href="" class="mui-navigate-right">Item 3</a>
  25. </li>
  26. <li class="mui-table-view-cell">
  27. <a href="" class="mui-navigate-right">Item 4</a>
  28. </li>
  29. <li class="mui-table-view-cell">
  30. <a href="" class="mui-navigate-right">Item 5</a>
  31. </li>
  32. </ul>
  33. </div>
  34. </div>
  35. <script src="../js/mui.min.js"></script>
  36. <script>
  37. mui.init({
  38. pullRefresh: {
  39. container: '#pullrefresh',
  40. down: {
  41. callback: pulldownRefresh
  42. },
  43. up: {
  44. contentrefresh: '正在加载...',
  45. callback: pullupRefresh
  46. }
  47. }
  48. });
  49. /**
  50. * 下拉刷新具体业务实现
  51. */
  52. function pulldownRefresh() {
  53. setTimeout(function() {
  54. var table = document.body.querySelector('.mui-table-view');
  55. var cells = document.body.querySelectorAll('.mui-table-view-cell');
  56. for (var i = cells.length, len = i + 3; i < len; i++) {
  57. var li = document.createElement('li');
  58. li.className = 'mui-table-view-cell';
  59. li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
  60. //下拉刷新,新纪录插到最前面;
  61. table.insertBefore(li, table.firstChild);
  62. }
  63. mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
  64. }, 1500);
  65. }
  66. var count = 0;
  67. /**
  68. * 上拉加载具体业务实现
  69. */
  70. function pullupRefresh() {
  71. setTimeout(function() {
  72. mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
  73. var table = document.body.querySelector('.mui-table-view');
  74. var cells = document.body.querySelectorAll('.mui-table-view-cell');
  75. for (var i = cells.length, len = i + 5; i < len; i++) {
  76. var li = document.createElement('li');
  77. li.className = 'mui-table-view-cell';
  78. li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
  79. table.appendChild(li);
  80. }
  81. }, 1500);
  82. }
  83. // if (mui.os.plus) {
  84. // mui.plusReady(function() {
  85. // setTimeout(function() {
  86. // mui('#pullrefresh').pullRefresh().pullupLoading();
  87. // }, 10);
  88. //
  89. // });
  90. // } else {
  91. // mui.ready(function() {
  92. // mui('#pullrefresh').pullRefresh().pullupLoading();
  93. // });
  94. // }
  95. </script>
  96. </body>
  97. </html>