frame1.html 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  6. <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7. <title></title>
  8. <link rel="stylesheet" type="text/css" href="../css/api.css" />
  9. <link rel="stylesheet" type="text/css" href="../css/border.css" />
  10. <link rel="stylesheet" type="text/css" href="../css/reset.css" />
  11. <link rel="stylesheet" type="text/css" href="../css/weui.min.css" />
  12. <link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
  13. <link rel="stylesheet" type="text/css" href="../css/style.css" />
  14. <style>
  15. .swiper-container {
  16. width: 100%;
  17. height: 100%;
  18. }
  19. .swiper-container{
  20. width: 100%;
  21. height: 0.5rem;
  22. }
  23. .swiper-slide{
  24. text-align: center;
  25. line-height: 0.5rem;
  26. font-size: 0.28rem;
  27. }
  28. .active, .active span{
  29. color: #d9251c;
  30. }
  31. .active span {
  32. border-bottom: 0.1em solid;
  33. }
  34. .white-back {
  35. position: fixed;
  36. z-index: 1;
  37. top: 0;
  38. left: 0;
  39. right: 0;
  40. padding: 0 0.2rem;
  41. }
  42. .new-list{
  43. margin-top: 1.3rem;
  44. }
  45. .null{
  46. text-align: center;
  47. color: #ccc;
  48. margin: 10px 0;
  49. display: none;
  50. }
  51. </style>
  52. <script>
  53. (function(w, d, m) {
  54. function r() {
  55. var t = 100,
  56. o = 750,
  57. e = d.documentElement.clientWidth || w.innerWidth,
  58. n = m.max(m.min(e, 480), 320),
  59. h = 50;
  60. 320 >= n && (h = m.floor(n / o * t * .99)),
  61. n > 320 && 362 >= n && (h = m.floor(n / o * t * 1)),
  62. n > 362 && 375 >= n && (h = m.floor(n / o * t * 1)),
  63. n > 375 && (h = m.floor(n / o * t * .97)),
  64. d.querySelector("html").style.fontSize = h + "px"
  65. };
  66. r();
  67. w.onresize = function() {
  68. r()
  69. }
  70. })(window, document, Math);
  71. </script>
  72. </head>
  73. <body id="viewport">
  74. <div class="topbar"></div>
  75. <div class="white-back" id="header">
  76. <div class="home-search">
  77. <img src="../image/search.png"> 搜索文章
  78. </div>
  79. <div style="padding-top: 0.2rem;">
  80. <div class="swiper-container" style="padding-bottom: 0.1em;">
  81. <div class="swiper-wrapper"></div>
  82. </div>
  83. </div>
  84. </div>
  85. <section class="new-list" page="1" style="padding-top: 0rem;">
  86. </section>
  87. <div class="null">没有更多了</div>
  88. <div class="back-top mask-hidden" id="fix1"></div>
  89. </body>
  90. <script type="text/javascript" src="../script/api.js"></script>
  91. <script type="text/javascript" src="../script/swiper.min.js"></script>
  92. <script type="text/javascript" src="../script/jquery.min.js"></script>
  93. <script type="text/javascript" src="../script/jquery.tap.js"></script>
  94. <script type="text/javascript">
  95. var _acid = '';
  96. var _minid = 1;
  97. apiready = function() {
  98. var $header = $api.byId('header');
  99. $api.fixIos7Bar($header);
  100. $api.fixStatusBar($header);
  101. setIosTopBar();
  102. getCatogoryData();
  103. getRouteData();
  104. api.addEventListener({
  105. name: 'scrolltobottom',
  106. extra: {
  107. threshold: 200
  108. }
  109. }, function(ret, err) {
  110. getRouteData();
  111. });
  112. api.addEventListener({
  113. name:'resume'
  114. }, function(ret, err){
  115. $(".new-list").attr("page", "1");
  116. getRouteData();
  117. });
  118. };
  119. function getRouteData() {
  120. var _page = $(".new-list").attr("page");
  121. if ( _page == 'false' ) {
  122. return false;
  123. }
  124. $(".new-list").attr("page", "false");
  125. $.ajax({
  126. url: siteurl + 'v1/entry/news',
  127. data: {
  128. page: _page,
  129. ac_id: _acid,
  130. page_size: 20
  131. },
  132. headers: { "X-TOKEN": $api.getStorage("accesstoken") },
  133. dataType: 'json',
  134. type: 'post',
  135. success: function(datas) {
  136. // toast_loding_hide();
  137. if (datas.result) {
  138. var _html = '';
  139. $.each(datas.data.new_list, function(index, item) {
  140. _html += '<div class="h10"></div>';
  141. _html += '<div class="home-hotel-list" keyid="' + item.article_id + '"><div class="home-hotel-left"><img src="' + siteurl + "/" + item.article_thumb + '"/></div>';
  142. _html += '<div class="home-hotel-right"><div class="h2"></div>';
  143. _html += '<div class="find-list-dsc">' + item.article_title + '</div>';
  144. _html += ' <div class="find-list-time">' + item.article_time + '</div></div> </div>';
  145. });
  146. if ( _page == 1 ) {
  147. $(".new-list").html(_html);
  148. }else{
  149. $(".new-list").append(_html);
  150. }
  151. if ( datas.data.new_list.length <= 0) {
  152. $(".new-list").attr("page", "false");
  153. $(".null").show();
  154. } else {
  155. _page++;
  156. $(".new-list").attr("page", _page);
  157. }
  158. }else{
  159. errcode(datas, datas.code)
  160. }
  161. return false;
  162. }
  163. });
  164. }
  165. function getCatogoryData() {
  166. $.ajax({
  167. url: siteurl + 'v1/entry/news_cate',
  168. data: {},
  169. headers: { "X-TOKEN": $api.getStorage("accesstoken") },
  170. dataType: 'json',
  171. type: 'post',
  172. success: function(datas) {
  173. // console.log(datas)
  174. if (datas.result) {
  175. var _html = '<div class="swiper-slide active" keyid=""><span>全部</span></div>';
  176. $.each(datas.data, function(index, item) {
  177. _html += '<div class="swiper-slide" keyid="' + item.ac_id + '"><span>' + item.ac_name + '</span></div>';
  178. });
  179. $(".swiper-wrapper").html(_html);
  180. var swiper = new Swiper('.swiper-container', {
  181. slidesPerView: 4,
  182. spaceBetween: 10,
  183. pagination: {
  184. el: '.swiper-pagination',
  185. clickable: true,
  186. },
  187. });
  188. }else{
  189. errcode(datas, datas.code)
  190. }
  191. return false;
  192. }
  193. });
  194. }
  195. $(".swiper-wrapper").on("tap", ".swiper-slide", function() {
  196. _acid = $(this).attr("keyid");
  197. $(".new-list").attr("page", "1");
  198. getRouteData();
  199. return false;
  200. })
  201. $(".new-list").on("tap", ".home-hotel-list", function() {
  202. var _keyid = $(this).attr("keyid");
  203. api.openWin({
  204. name: 'finddetails',
  205. url: './find/finddetails.html',
  206. bounces: false,
  207. pageParam: {
  208. keyid: _keyid
  209. }
  210. });
  211. return false;
  212. })
  213. /////
  214. $(".home-search").on("tap", function() {
  215. api.openWin({
  216. name: 'findsearch',
  217. url: './find/findsearch.html',
  218. bounces: false
  219. });
  220. return false;
  221. })
  222. $(".back-top").on("tap", function() {
  223. $('html , body').animate({ scrollTop: 0 }, 'slow');
  224. return false;
  225. });
  226. $.fn.fixedDiv = function(actCls) {
  227. var that = $(this),
  228. offsetTop = that.offset().top,
  229. scrollTop;
  230. function fix() {
  231. scrollTop = $(document).scrollTop();
  232. if (scrollTop > offsetTop) {
  233. that.removeClass(actCls);
  234. } else {
  235. that.addClass(actCls);
  236. }
  237. }
  238. fix();
  239. $(window).scroll(fix);
  240. }
  241. $('#fix1').fixedDiv('mask-hidden')
  242. $(".swiper-wrapper").on("tap", ".swiper-slide", function() {
  243. $(".swiper-slide").removeClass("active");
  244. $(this).addClass("active");
  245. return false;
  246. })
  247. </script>
  248. </html>