js14.html 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  7. <link rel="stylesheet" href="../css/weui.css"/>
  8. <link rel="stylesheet" href="../css/weuix.css"/>
  9. <script src="../js/zepto.min.js"></script>
  10. <script src="../js/zepto.weui.js"></script>
  11. <script src="../js/php.js"></script>
  12. <script>
  13. $(function(){
  14. $(document.body).pullToRefresh({
  15. distance: 10,
  16. onRefresh:function() {
  17. $.post("../php/page.php",{"page":1,"pagesize":8,ajax:2},function(rs){
  18. $("#rank-list").html(tpl(document.getElementById('tpl').innerHTML,rs));
  19. },'json')
  20. $(document.body).pullToRefreshDone();
  21. }});
  22. });
  23. </script>
  24. </head>
  25. <body ontouchstart>
  26. <div class="weui-pull-to-refresh__layer">
  27. <div class='weui-pull-to-refresh__arrow'></div>
  28. <div class='weui-pull-to-refresh__preloader'></div>
  29. <div class="down">下拉刷新</div>
  30. <div class="up">释放刷新</div>
  31. <div class="refresh">正在刷新</div>
  32. </div>
  33. <div class="page-hd">
  34. <h1 class="page-hd-title">
  35. 下拉刷新
  36. </h1>
  37. <p class="page-hd-desc">下拉显示内容</p>
  38. </div>
  39. <div class="weui-cells" id="rank-list">
  40. <script id="tpl" type="text/html">
  41. <% for(var i in list) { %>
  42. <div class="weui-cell">
  43. <div class="weui-cell__bd">
  44. <p>ID: <%=list[i].id%>姓名: <%=list[i].title%></p>
  45. </div>
  46. <div class="weui-cell__ft"><%=list[i].phone%></div>
  47. </div>
  48. <% } %>
  49. </script>
  50. </div>
  51. <br>
  52. <br>
  53. <div class="weui-footer weui-footer_fixed-bottom">
  54. <p class="weui-footer__links">
  55. <a href="../index.html" class="weui-footer__link">WeUI首页</a>
  56. </p>
  57. <p class="weui-footer__text">Copyright &copy; Yoby</p>
  58. </div>
  59. </body>
  60. </html>