index.html 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. {extend name="layout/base" /}
  2. {block name="header"}
  3. <link rel="stylesheet" href="__STATIC__/css/mobile/style.css">
  4. {/block}
  5. {block name="content"}
  6. <!-- header start -->
  7. <header class="top">
  8. <div class="header">
  9. <a href="javascript:history.back(-1)"><img src="__STATIC__/images/mobile/icon/left.png" class="back"></a>
  10. <div>
  11. <a href="javascript:;" onclick="window.location.replace('{:getMobileTypeGame(0)}')"><h2 {if condition="$showType eq 'type'"} class="active type"{/if} class="type">类型</h2></a>
  12. <a href="javascript:;" onclick="window.location.replace('{:getMobileSubjectGame(0)}')"><h2 {if condition="$showType eq 'subject'"} class="active"{/if}>题材</h2></a>
  13. </div>
  14. <div>
  15. <div class="search-icon"><a href="{:getMobileSearchUrl()}"><img src="__STATIC__/images/mobile/icon/search.png"></a></div>
  16. <div class="menu"><img src="__STATIC__/images/mobile/icon/menu-bar.png"></div>
  17. </div>
  18. </div>
  19. </header>
  20. <!-- header end -->
  21. {if condition="$showType eq 'type'"}
  22. <ul class="game-category-title">
  23. <li {if(input('type')=='0' || input('type')=='')} class="active"{/if}>
  24. <a href="javascript:;" onclick="window.location.replace('{:getMobileTypeGame(0)}')">全部</a>
  25. </div>
  26. {volist name="gameTypeList" id="gtvo"}
  27. <li {if(input('type')==$gtvo.id)} class="active"{/if}>
  28. <a href="javascript:;" onclick="window.location.replace('{:getMobileTypeGame($gtvo['id'])}')">{$gtvo.name}</a>
  29. </div>
  30. {/volist}
  31. </ul>
  32. {else/}
  33. <ul class="game-category-title">
  34. <li {if(input('subject')=='0' || input('subject')=='')} class="active"{/if}>
  35. <a href="javascript:;" onclick="window.location.replace('{:getMobileSubjectGame(0)}')">全部</a>
  36. </div>
  37. {volist name="gameSubjectList" id="gsvo"}
  38. <li {if(input('subject')==$gsvo.id)} class="active"{/if}>
  39. <a href="javascript:;" onclick="window.location.replace('{:getMobileSubjectGame($gsvo['id'])}')">{$gsvo.name}</a>
  40. </div>
  41. {/volist}
  42. </ul>
  43. {/if}
  44. <div>
  45. <div class="warp-gamelist">
  46. {notempty name="$list"}
  47. <div class="game-list" >
  48. <p>共<span>{$totalGameCnt}</span>款游戏</p>
  49. {volist name="list" id="vo"}
  50. <div class="game-info">
  51. <a href="{$vo.url}">
  52. <img lazy-src="{$vo.icon}" src="__STATIC__/images/icon/150-150.png" class="smallIcon" />
  53. <div class="content">
  54. <h4>{$vo.nickname}</h4>
  55. <p>{$vo.typename}<span>|</span>{$vo.subjectname}<span>|</span>{$vo.size}</p>
  56. {if($vo['publicity'])}<P>{$vo.publicity}</P>{/if}
  57. </div>
  58. </a>
  59. <div class="download">
  60. <a href="javascript:;">下载</a>
  61. <p class="android_down_url">{$vo.download}</p>
  62. <p class="ios_down_url">{$vo.ios_download}</p>
  63. </div>
  64. </div>
  65. {/volist}
  66. </div>
  67. <div class="weui-loadmore">
  68. <i class="weui-loading"></i>
  69. <span class="weui-loadmore__tips">数据加载中,请稍等</span>
  70. </div>
  71. <div class="no-more-data"><span></span>已经到底啦(>_<)<span></span></div>
  72. {include file="layout/footer" /}
  73. {else/}
  74. <!-- 无相关游戏 -->
  75. <div class="no_content">
  76. <div>
  77. <img src="__STATIC__/images/mobile/icon/no-gift.png">
  78. <p>暂无相关游戏</p>
  79. </div>
  80. </div>
  81. <!-- 无相关游戏end-->
  82. {/notempty}
  83. </div>
  84. </div>
  85. {/block}
  86. {block name="detail_js"}
  87. <script>
  88. var gamelist = $(".game-list").height();
  89. var h = $("footer").height();
  90. if (aHigh > (gamelist + head+ h)) {
  91. $(".footer").addClass("fixed");
  92. $(".footer").css("width","3.02rem")
  93. }else{
  94. $(".footer").addClass("no-fixed");
  95. }
  96. // 加载更多
  97. var currentPage = parseInt("{$list->currentPage()}");
  98. var lastPage = parseInt("{$list->lastPage()}");
  99. var total = parseInt("{$list->total()}");
  100. var url = $(".active").attr('href');
  101. var defaultImg = "__STATIC__/images/icon/150-150.png";
  102. $(".no-more-data").hide();
  103. var loading = false; //状态标记
  104. $(".warp-gamelist").infinite(90).on("infinite", function() {
  105. if (loading) return;
  106. loading = true;
  107. if (currentPage + 1 > lastPage) {
  108. $(".weui-loadmore").hide();
  109. if (currentPage > 1) {
  110. $(".no-more-data").show();
  111. }
  112. loading = false;
  113. return false;
  114. }
  115. $(".weui-loadmore").show();
  116. setTimeout(function() {
  117. currentPage += 1;
  118. $.ajax({
  119. type: "POST",
  120. timeOut: 10000,
  121. url: url,
  122. data: {
  123. "page": currentPage
  124. },
  125. async: false,
  126. success: function(res) {
  127. console.log(res);
  128. var arr = res.data.data;
  129. arr.forEach(function(val, index) {
  130. var html='';
  131. html += "<div class='game-info'>"+
  132. "<a href='"+val.url+"'>"+
  133. "<img lazy-src='"+val.icon+"' src='__STATIC__/images/icon/150-150.png' class='smallIcon' />"+
  134. "<div class='content'><h4>"+val.nickname+"</h4><p>"+val.typename+"<span>|</span>"+val.subjectname+"<span>|</span>"+val.size+"</p>";
  135. if(val.publicity){
  136. html += "<P>"+val.publicity+"</P>";
  137. }
  138. html += "</div></a>"+
  139. "<div class='download'>"+
  140. "<a href='javascript:;'>下载</a>"+
  141. "<p class='android_down_url'>"+val.download+"</p>"+
  142. "<p class='ios_down_url'>"+val.ios_download+"</p></div></div>";
  143. $(".game-list").append(html);
  144. });
  145. },
  146. error: function() {
  147. $.alert("网络错误,请刷新页面重试");
  148. }
  149. });
  150. $.getScript("/static/js/mobile/reload.js");
  151. $(".weui-loadmore").hide();
  152. loading = false;
  153. }, 500); //模拟延迟
  154. });
  155. // 返回顶部
  156. $(function () {
  157. //检测屏幕高度
  158. var height = $(".warp-gamelist").height();
  159. height = 3 / 4 * height;
  160. //scroll() 方法为滚动事件
  161. $(".warp-gamelist").scroll(function () {
  162. console.log(11111)
  163. if ($('.warp-gamelist').scrollTop() > height) {
  164. $(".return-top").fadeIn(500);
  165. } else {
  166. $(".return-top").fadeOut(500);
  167. }
  168. });
  169. });
  170. $(".return-top").click(function () {
  171. $(".warp-gamelist").animate({ scrollTop: '0px' }, 1000);
  172. });
  173. </script>
  174. {/block}