p10.html 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  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/mock.min.js"></script>
  11. <script>
  12. Mock.mock('http://api.com', {
  13. "list|10": [{
  14. 'name': '@cname', //中文名称
  15. 'age|1-100': 100, //100以内随机整数
  16. 'date': '@date("yyyy-MM-dd")', //日期
  17. 'city': '@city(true)' //中国城市
  18. }]
  19. });
  20. $(function(){
  21. $.get("http://api.com",function(rs){
  22. var html='';
  23. for(var i=0;i<rs.list.length;i++) {
  24. html+=' <a class="weui-cell weui-cell_access" href="javascript:;">' +
  25. ' <div class="weui-cell__bd">' +
  26. ' <p>'+rs.list[i].name+'</p>' +
  27. ' </div>' +
  28. ' <div class="weui-cell__ft">' +rs.list[i].date+'</div>' +
  29. ' </a>'
  30. }
  31. $("#list").html(html);
  32. },'json')
  33. });
  34. </script>
  35. </head>
  36. <body ontouchstart>
  37. <div class="page-hd">
  38. <h1 class="page-hd-title">
  39. mock模拟数据
  40. </h1>
  41. <p class="page-hd-desc f-green" onclick="location.href='//mockjs.com/examples.html'">开发文档</p>
  42. </div>
  43. <div class="weui-cells__title">模拟数据生成列表</div>
  44. <div class="weui-cells" id="list">
  45. </div>
  46. <br>
  47. <br>
  48. <div class="weui-footer weui-footer_fixed-bottom">
  49. <p class="weui-footer__links">
  50. <a href="../index.html" class="weui-footer__link">WeUI首页</a>
  51. </p>
  52. <p class="weui-footer__text">Copyright &copy; Yoby</p>
  53. </div>
  54. </body>
  55. </html>