tab-top-subpage-2.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  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. <style>
  11. html,
  12. body {
  13. background-color: #efeff4;
  14. }
  15. .title {
  16. padding: 20px 15px 10px;
  17. color: #6d6d72;
  18. font-size: 15px;
  19. background-color: #fff;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
  25. <div class="mui-scroll">
  26. <div class="title">
  27. 这是webview模式选项卡中的第2个子页面,该页面展示一个支持上拉加载的消息列表
  28. </div>
  29. <ul class="mui-table-view mui-table-view-chevron">
  30. <li class="mui-table-view-cell">
  31. <a href="" class="mui-navigate-right">热点-Item 1</a>
  32. </li>
  33. <li class="mui-table-view-cell">
  34. <a href="" class="mui-navigate-right">热点-Item 2</a>
  35. </li>
  36. <li class="mui-table-view-cell">
  37. <a href="" class="mui-navigate-right">热点-Item 3</a>
  38. </li>
  39. <li class="mui-table-view-cell">
  40. <a href="" class="mui-navigate-right">热点-Item 4</a>
  41. </li>
  42. <li class="mui-table-view-cell">
  43. <a href="" class="mui-navigate-right">热点-Item 5</a>
  44. </li>
  45. <li class="mui-table-view-cell">
  46. <a href="" class="mui-navigate-right">热点-Item 6</a>
  47. </li>
  48. <li class="mui-table-view-cell">
  49. <a href="" class="mui-navigate-right">热点-Item 7</a>
  50. </li>
  51. <li class="mui-table-view-cell">
  52. <a href="" class="mui-navigate-right">热点-Item 8</a>
  53. </li>
  54. <li class="mui-table-view-cell">
  55. <a href="" class="mui-navigate-right">热点-Item 9</a>
  56. </li>
  57. <li class="mui-table-view-cell">
  58. <a href="" class="mui-navigate-right">热点-Item 10</a>
  59. </li>
  60. <li class="mui-table-view-cell">
  61. <a href="" class="mui-navigate-right">热点-Item 11</a>
  62. </li>
  63. <li class="mui-table-view-cell">
  64. <a href="" class="mui-navigate-right">热点-Item 12</a>
  65. </li>
  66. <li class="mui-table-view-cell">
  67. <a href="" class="mui-navigate-right">热点-Item 13</a>
  68. </li>
  69. <li class="mui-table-view-cell">
  70. <a href="" class="mui-navigate-right">热点-Item 14</a>
  71. </li>
  72. <li class="mui-table-view-cell">
  73. <a href="" class="mui-navigate-right">热点-Item 15</a>
  74. </li>
  75. <li class="mui-table-view-cell">
  76. <a href="" class="mui-navigate-right">热点-Item 16</a>
  77. </li>
  78. <li class="mui-table-view-cell">
  79. <a href="" class="mui-navigate-right">热点-Item 17</a>
  80. </li>
  81. <li class="mui-table-view-cell">
  82. <a href="" class="mui-navigate-right">热点-Item 18</a>
  83. </li>
  84. <li class="mui-table-view-cell">
  85. <a href="" class="mui-navigate-right">热点-Item 19</a>
  86. </li>
  87. <li class="mui-table-view-cell">
  88. <a href="" class="mui-navigate-right">热点-Item 20</a>
  89. </li>
  90. </ul>
  91. </div>
  92. </div>
  93. <script src="../js/mui.min.js"></script>
  94. <script>
  95. mui.init({
  96. swipeBack: false,
  97. keyEventBind: {
  98. backbutton: false //关闭back按键监听
  99. },
  100. pullRefresh: {
  101. container: '#pullrefresh',
  102. up: {
  103. contentrefresh: '正在加载...',
  104. callback: pullupRefresh
  105. }
  106. }
  107. });
  108. var count = 0;
  109. /**
  110. * 上拉加载具体业务实现
  111. */
  112. function pullupRefresh() {
  113. setTimeout(function() {
  114. mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
  115. var table = document.body.querySelector('.mui-table-view');
  116. var cells = document.body.querySelectorAll('.mui-table-view-cell');
  117. for(var i = cells.length, len = i + 20; i < len; i++) {
  118. var li = document.createElement('li');
  119. li.className = 'mui-table-view-cell';
  120. li.innerHTML = '<a class="mui-navigate-right">热点-Item ' + (i + 1) + '</a>';
  121. table.appendChild(li);
  122. }
  123. }, 1000);
  124. }
  125. </script>
  126. </body>
  127. </html>