fe / mars-static · Commits

Go to a project

Authored by 李靖
Commit d56be3bdf3c32cc31d25c61132181ea2d8815e25 1 parent e60b4d5a

店铺列表，商圈列表加载更多

Inline Side-by-side
Showing 6 changed files with 281 additions and 194 deletions
@@ -37,193 +37,195 @@ @@ -37,193 +37,195 @@
37 <a class="list-item" href="#" target="_blank">北京</a> 37 <a class="list-item" href="#" target="_blank">北京</a>
38 <a class="list-item" href="#" target="_blank">北京</a> 38 <a class="list-item" href="#" target="_blank">北京</a>
39 </div> 39 </div>
40 - <div class="shop-item">  
41 - <div class="shop-pic">  
42 - <img src="../../src/images/area/city-test.png" alt="alt" />  
43 - <a href="#" target="_blank" title="title">  
44 - <h2 class="name">  
45 - <p class="en">Hengshan Road</p>  
46 - <p class="ch">衡山路</p>  
47 - </h2>  
48 - </a> 40 + <div id="list-container">
  41 + <div class="shop-item">
  42 + <div class="shop-pic">
  43 + <img src="../../src/images/area/city-test.png" alt="alt" />
  44 + <a href="#" target="_blank" title="title">
  45 + <h2 class="name">
  46 + <p class="en">Hengshan Road</p>
  47 + <p class="ch">衡山路</p>
  48 + </h2>
  49 + </a>
  50 + </div>
  51 + <div class="shop-list">
  52 + <a href="#" target="_blank" title="title">
  53 + <div class="list-item">
  54 + <img class="pic lazy" alt="alt" data-original="../../src/images/area/city-test.png" />
  55 + <div class="new"></div>
  56 + <div class="type">家居</div>
  57 + <div class="bg"></div>
  58 + <div class="title eps-1">THE cub</div>
  59 + </div>
  60 + </a>
  61 + <a href="#" target="_blank" title="title">
  62 + <div class="list-item">
  63 + <img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
  64 + <div class="new"></div>
  65 + <div class="type">家居</div>
  66 + <div class="bg"></div>
  67 + <div class="title">THE cub</div>
  68 + </div>
  69 + </a>
  70 + <a href="#" target="_blank" title="title">
  71 + <div class="list-item">
  72 + <img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
  73 + <div class="new"></div>
  74 + <div class="type">家居</div>
  75 + <div class="bg"></div>
  76 + <div class="title">THE cub</div>
  77 + </div>
  78 + </a>
  79 + <a href="#" target="_blank" title="title">
  80 + <div class="list-item">
  81 + <img class="pic lazy" alt="alt" data-originalc="../..//src/images/area/city-test.png" />
  82 + <div class="new"></div>
  83 + <div class="type">家居</div>
  84 + <div class="bg"></div>
  85 + <div class="title">THE cub</div>
  86 + </div>
  87 + </a>
  88 + <a href="#" target="_blank" title="title">
  89 + <div class="list-item">
  90 + <img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
  91 + <div class="new"></div>
  92 + <div class="type">家居</div>
  93 + <div class="bg"></div>
  94 + <div class="title">THE cub</div>
  95 + </div>
  96 + </a>
  97 + <a href="#" class="more" target="_blank">
  98 + <div class="list-item">
  99 + More
  100 + </div>
  101 + </a>
  102 + </div>
49 </div> 103 </div>
50 - <div class="shop-list">  
51 - <a href="#" target="_blank" title="title">  
52 - <div class="list-item">  
53 - <img class="pic lazy" alt="alt" data-original="../../src/images/area/city-test.png" />  
54 - <div class="new"></div>  
55 - <div class="type">家居</div>  
56 - <div class="bg"></div>  
57 - <div class="title eps-1">THE cub</div>  
58 - </div>  
59 - </a>  
60 - <a href="#" target="_blank" title="title">  
61 - <div class="list-item">  
62 - <img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />  
63 - <div class="new"></div>  
64 - <div class="type">家居</div>  
65 - <div class="bg"></div>  
66 - <div class="title">THE cub</div>  
67 - </div>  
68 - </a>  
69 - <a href="#" target="_blank" title="title">  
70 - <div class="list-item">  
71 - <img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />  
72 - <div class="new"></div>  
73 - <div class="type">家居</div>  
74 - <div class="bg"></div>  
75 - <div class="title">THE cub</div>  
76 - </div>  
77 - </a>  
78 - <a href="#" target="_blank" title="title">  
79 - <div class="list-item">  
80 - <img class="pic lazy" alt="alt" data-originalc="../..//src/images/area/city-test.png" />  
81 - <div class="new"></div>  
82 - <div class="type">家居</div>  
83 - <div class="bg"></div>  
84 - <div class="title">THE cub</div>  
85 - </div>  
86 - </a>  
87 - <a href="#" target="_blank" title="title">  
88 - <div class="list-item">  
89 - <img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />  
90 - <div class="new"></div>  
91 - <div class="type">家居</div>  
92 - <div class="bg"></div>  
93 - <div class="title">THE cub</div>  
94 - </div>  
95 - </a>  
96 - <a href="#" class="more" target="_blank">  
97 - <div class="list-item">  
98 - More  
99 - </div>  
100 - </a> 104 + <div class="shop-item">
  105 + <div class="shop-pic">
  106 + <img src="../..//src/images/area/city-test.png" alt="alt" />
  107 + <a href="#" target="_blank" title="title">
  108 + <h2 class="name">
  109 + <p class="en">Hengshan Road</p>
  110 + <p class="ch">衡山路</p>
  111 + </h2>
  112 + </a>
  113 + </div>
  114 + <div class="shop-list">
  115 + <a href="#" target="_blank" title="title">
  116 + <div class="list-item">
  117 + <img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
  118 + <div class="new"></div>
  119 + <div class="type">家居</div>
  120 + <div class="bg"></div>
  121 + <div class="title">THE cub</div>
  122 + </div>
  123 + </a>
  124 + <a href="#" target="_blank" title="title">
  125 + <div class="list-item">
  126 + <img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
  127 + <div class="new"></div>
  128 + <div class="type">家居</div>
  129 + <div class="bg"></div>
  130 + <div class="title">THE cub</div>
  131 + </div>
  132 + </a>
  133 + <a href="#" target="_blank" title="title">
  134 + <div class="list-item">
  135 + <img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
  136 + <div class="new"></div>
  137 + <div class="type">家居</div>
  138 + <div class="bg"></div>
  139 + <div class="title">THE cub</div>
  140 + </div>
  141 + </a>
  142 + <a href="#" target="_blank" title="title">
  143 + <div class="list-item">
  144 + <img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
  145 + <div class="new"></div>
  146 + <div class="type">家居</div>
  147 + <div class="bg"></div>
  148 + <div class="title">THE cub</div>
  149 + </div>
  150 + </a>
  151 + <a href="#" target="_blank" title="title">
  152 + <div class="list-item">
  153 + <img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
  154 + <div class="new"></div>
  155 + <div class="type">家居</div>
  156 + <div class="bg"></div>
  157 + <div class="title">THE cub</div>
  158 + </div>
  159 + </a>
  160 + <a href="#" class="more" target="_blank">
  161 + <div class="list-item">
  162 + More
  163 + </div>
  164 + </a>
  165 + </div>
101 </div> 166 </div>
102 - </div>  
103 - <div class="shop-item">  
104 - <div class="shop-pic">  
105 - <img src="../..//src/images/area/city-test.png" alt="alt" />  
106 - <a href="#" target="_blank" title="title">  
107 - <h2 class="name">  
108 - <p class="en">Hengshan Road</p>  
109 - <p class="ch">衡山路</p>  
110 - </h2>  
111 - </a>  
112 - </div>  
113 - <div class="shop-list">  
114 - <a href="#" target="_blank" title="title">  
115 - <div class="list-item">  
116 - <img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />  
117 - <div class="new"></div>  
118 - <div class="type">家居</div>  
119 - <div class="bg"></div>  
120 - <div class="title">THE cub</div>  
121 - </div>  
122 - </a>  
123 - <a href="#" target="_blank" title="title">  
124 - <div class="list-item">  
125 - <img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />  
126 - <div class="new"></div>  
127 - <div class="type">家居</div>  
128 - <div class="bg"></div>  
129 - <div class="title">THE cub</div>  
130 - </div>  
131 - </a>  
132 - <a href="#" target="_blank" title="title">  
133 - <div class="list-item">  
134 - <img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />  
135 - <div class="new"></div>  
136 - <div class="type">家居</div>  
137 - <div class="bg"></div>  
138 - <div class="title">THE cub</div>  
139 - </div>  
140 - </a>  
141 - <a href="#" target="_blank" title="title">  
142 - <div class="list-item">  
143 - <img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />  
144 - <div class="new"></div>  
145 - <div class="type">家居</div>  
146 - <div class="bg"></div>  
147 - <div class="title">THE cub</div>  
148 - </div>  
149 - </a>  
150 - <a href="#" target="_blank" title="title">  
151 - <div class="list-item">  
152 - <img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />  
153 - <div class="new"></div>  
154 - <div class="type">家居</div>  
155 - <div class="bg"></div>  
156 - <div class="title">THE cub</div>  
157 - </div>  
158 - </a>  
159 - <a href="#" class="more" target="_blank">  
160 - <div class="list-item">  
161 - More  
162 - </div>  
163 - </a>  
164 - </div>  
165 - </div>  
166 - <div class="shop-item">  
167 - <div class="shop-pic">  
168 - <img src="../..//src/images/area/city-test.png" alt="alt" />  
169 - <a href="#" target="_blank" title="title">  
170 - <h2 class="name">  
171 - <p class="en">Hengshan Road</p>  
172 - <p class="ch">衡山路</p>  
173 - </h2>  
174 - </a>  
175 - </div>  
176 - <div class="shop-list">  
177 - <a href="#" target="_blank" title="title">  
178 - <div class="list-item">  
179 - <img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />  
180 - <div class="new"></div>  
181 - <div class="type">家居</div>  
182 - <div class="bg"></div>  
183 - <div class="title">THE cub</div>  
184 - </div>  
185 - </a>  
186 - <a href="#" target="_blank" title="title">  
187 - <div class="list-item">  
188 - <img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />  
189 - <div class="new"></div>  
190 - <div class="type">家居</div>  
191 - <div class="bg"></div>  
192 - <div class="title">THE cub</div>  
193 - </div>  
194 - </a>  
195 - <a href="#" target="_blank" title="title">  
196 - <div class="list-item">  
197 - <img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />  
198 - <div class="new"></div>  
199 - <div class="type">家居</div>  
200 - <div class="bg"></div>  
201 - <div class="title">THE cub</div>  
202 - </div>  
203 - </a>  
204 - <a href="#" target="_blank" title="title">  
205 - <div class="list-item">  
206 - <img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />  
207 - <div class="new"></div>  
208 - <div class="type">家居</div>  
209 - <div class="bg"></div>  
210 - <div class="title">THE cub</div>  
211 - </div>  
212 - </a>  
213 - <a href="#" target="_blank" title="title">  
214 - <div class="list-item">  
215 - <img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />  
216 - <div class="new"></div>  
217 - <div class="type">家居</div>  
218 - <div class="bg"></div>  
219 - <div class="title">THE cub</div>  
220 - </div>  
221 - </a>  
222 - <a href="#" class="more" target="_blank">  
223 - <div class="list-item">  
224 - More  
225 - </div>  
226 - </a> 167 + <div class="shop-item">
  168 + <div class="shop-pic">
  169 + <img src="../..//src/images/area/city-test.png" alt="alt" />
  170 + <a href="#" target="_blank" title="title">
  171 + <h2 class="name">
  172 + <p class="en">Hengshan Road</p>
  173 + <p class="ch">衡山路</p>
  174 + </h2>
  175 + </a>
  176 + </div>
  177 + <div class="shop-list">
  178 + <a href="#" target="_blank" title="title">
  179 + <div class="list-item">
  180 + <img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />
  181 + <div class="new"></div>
  182 + <div class="type">家居</div>
  183 + <div class="bg"></div>
  184 + <div class="title">THE cub</div>
  185 + </div>
  186 + </a>
  187 + <a href="#" target="_blank" title="title">
  188 + <div class="list-item">
  189 + <img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />
  190 + <div class="new"></div>
  191 + <div class="type">家居</div>
  192 + <div class="bg"></div>
  193 + <div class="title">THE cub</div>
  194 + </div>
  195 + </a>
  196 + <a href="#" target="_blank" title="title">
  197 + <div class="list-item">
  198 + <img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />
  199 + <div class="new"></div>
  200 + <div class="type">家居</div>
  201 + <div class="bg"></div>
  202 + <div class="title">THE cub</div>
  203 + </div>
  204 + </a>
  205 + <a href="#" target="_blank" title="title">
  206 + <div class="list-item">
  207 + <img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />
  208 + <div class="new"></div>
  209 + <div class="type">家居</div>
  210 + <div class="bg"></div>
  211 + <div class="title">THE cub</div>
  212 + </div>
  213 + </a>
  214 + <a href="#" target="_blank" title="title">
  215 + <div class="list-item">
  216 + <img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />
  217 + <div class="new"></div>
  218 + <div class="type">家居</div>
  219 + <div class="bg"></div>
  220 + <div class="title">THE cub</div>
  221 + </div>
  222 + </a>
  223 + <a href="#" class="more" target="_blank">
  224 + <div class="list-item">
  225 + More
  226 + </div>
  227 + </a>
  228 + </div>
227 </div> 229 </div>
228 </div> 230 </div>
229 <h1 class="h1-g">新鲜好去处，探索城市潮流，潮流火星APP下载|火星Mars</h1> 231 <h1 class="h1-g">新鲜好去处，探索城市潮流，潮流火星APP下载|火星Mars</h1>
1 { 1 {
2 "name": "mars-static", 2 "name": "mars-static",
3 "private": true, 3 "private": true,
4 - "version": "1.0.7", 4 + "version": "1.0.8",
5 "description": "mars-static", 5 "description": "mars-static",
6 "main": "build.js", 6 "main": "build.js",
7 "scripts": { 7 "scripts": {
1 require('./common/area-common'); 1 require('./common/area-common');
  2 +require('./area/more-area');
  1 +const $ = require('jquery');
  2 +const lazyload = require('../plugins/lazyload');
  3 +window.jQuery = $;
  4 +
  5 +let moreObj = {
  6 + domInit: function () {
  7 + this.el = {
  8 + $listContainer: $('#list-container')
  9 + };
  10 + },
  11 + init: function () {
  12 + this.domInit();
  13 + this.page = 0;
  14 + this.loading = false;
  15 + this.end = false;
  16 + this.scroll();
  17 + },
  18 + scroll: function () {
  19 + $(window).scroll(() => {
  20 + if (($(window).scrollTop() + $(window).height() >= $(document).height() * 0.8)) {
  21 + this.doMore();
  22 + }
  23 + });
  24 + },
  25 + doMore: function () {
  26 + if (!this.loading && !this.end) {
  27 + this.page++;
  28 + this.getMore();
  29 + }
  30 + },
  31 + getMore: function () {
  32 + this.loading = true;
  33 + let ajaxData = {
  34 + page: this.page,
  35 + row: 10
  36 + };
  37 + if ($('#cityId').val()) {
  38 + Object.assign(ajaxData, {cityId: $('#cityId').val()});
  39 + }
  40 + $.ajax({
  41 + method: 'GET',
  42 + url: window.$ajaxPath,
  43 + data: ajaxData,
  44 + success: (result) => {
  45 + if ($(result).length > 0) {
  46 + let $result = $(result);
  47 + let $lazyImg = $result.find('img.lazy');
  48 +
  49 + this.el.$listContainer.append($result);
  50 + lazyload($lazyImg, {
  51 + threshold: 1000,
  52 + q: 80
  53 + });
  54 + this.loading = false;
  55 + } else {
  56 + this.end = true;
  57 + }
  58 + }
  59 + });
  60 + }
  61 +};
  62 +
  63 +$(
  64 + function () {
  65 + moreObj.init();
  66 + }
  67 +);
1 const $ = require('jquery'); 1 const $ = require('jquery');
  2 +const lazyload = require('../plugins/lazyload');
2 window.jQuery = $; 3 window.jQuery = $;
3 4
4 let moreObj = { 5 let moreObj = {
@@ -29,17 +30,33 @@ let moreObj = { @@ -29,17 +30,33 @@ let moreObj = {
29 }, 30 },
30 getMore: function () { 31 getMore: function () {
31 this.loading = true; 32 this.loading = true;
  33 + let ajaxData = {
  34 + page: this.page,
  35 + row: 10
  36 + };
  37 + if ($('#businessAreaId').val()) {
  38 + Object.assign(ajaxData, {businessAreaId: $('#businessAreaId').val()});
  39 + }
  40 + if ($('#cityId').val()) {
  41 + Object.assign(ajaxData, {cityId: $('#cityId').val()});
  42 + }
  43 + if ($('#tagId').val()) {
  44 + Object.assign(ajaxData, {tagId: $('#tagId').val()});
  45 + }
32 $.ajax({ 46 $.ajax({
33 method: 'GET', 47 method: 'GET',
34 url: window.$ajaxPath, 48 url: window.$ajaxPath,
35 - data: {  
36 - page: this.page,  
37 - row: 10,  
38 - businessAreaId: 44  
39 - }, 49 + data: ajaxData,
40 success: (result) => { 50 success: (result) => {
41 - if (result) {  
42 - this.el.$listContainer.append(result); 51 + if ($(result).length > 0) {
  52 + let $result = $(result);
  53 + let $lazyImg = $result.find('img.lazy');
  54 +
  55 + this.el.$listContainer.append($result);
  56 + lazyload($lazyImg, {
  57 + threshold: 1000,
  58 + q: 80
  59 + });
43 this.loading = false; 60 this.loading = false;
44 } else { 61 } else {
45 this.end = true; 62 this.end = true;
@@ -204,7 +204,7 @@ @@ -204,7 +204,7 @@
204 .down-list { 204 .down-list {
205 display: none; 205 display: none;
206 position: absolute; 206 position: absolute;
207 - top: 86px; 207 + top: 85px;
208 left: 0; 208 left: 0;
209 max-height: 665px; 209 max-height: 665px;
210 width: 720px; 210 width: 720px;