Showing
1 changed file
with
51 additions
and
5 deletions
@@ -19,6 +19,7 @@ let $ngc = $goodsContainer.children('.new-goods'); | @@ -19,6 +19,7 @@ let $ngc = $goodsContainer.children('.new-goods'); | ||
19 | let $sgc = $goodsContainer.children('.sale-goods'); | 19 | let $sgc = $goodsContainer.children('.sale-goods'); |
20 | let $pgc = $goodsContainer.children('.price-goods'); | 20 | let $pgc = $goodsContainer.children('.price-goods'); |
21 | let $dgc = $goodsContainer.children('.discount-goods'); | 21 | let $dgc = $goodsContainer.children('.discount-goods'); |
22 | +let $container = $defaultgc; // 承载商品列表的容器 | ||
22 | let $listNav = $('#list-nav'); // 筛选项列表 | 23 | let $listNav = $('#list-nav'); // 筛选项列表 |
23 | let $pre = $listNav.find('.active'); // 记录进入筛选前的active项,初始为选中项 | 24 | let $pre = $listNav.find('.active'); // 记录进入筛选前的active项,初始为选中项 |
24 | let $filterBox = $('.filter-box'); | 25 | let $filterBox = $('.filter-box'); |
@@ -56,8 +57,12 @@ let navInfo = { | @@ -56,8 +57,12 @@ let navInfo = { | ||
56 | end: false | 57 | end: false |
57 | } | 58 | } |
58 | }; | 59 | }; |
60 | + | ||
59 | let navType = 'default'; // 目前激活的导航页面 | 61 | let navType = 'default'; // 目前激活的导航页面 |
60 | let defaultOpt = navInfo.default; // 默认参数 | 62 | let defaultOpt = navInfo.default; // 默认参数 |
63 | +let onSearching = false; // 是否正在搜索 | ||
64 | +let isScrollLoad = false; // 是否是滚动加载 | ||
65 | +let page = 0; // 页码 | ||
61 | 66 | ||
62 | /** | 67 | /** |
63 | * 处理筛选参数 | 68 | * 处理筛选参数 |
@@ -76,6 +81,10 @@ function handleChoseFilter() { | @@ -76,6 +81,10 @@ function handleChoseFilter() { | ||
76 | */ | 81 | */ |
77 | function getGoodsList() { | 82 | function getGoodsList() { |
78 | handleChoseFilter(); | 83 | handleChoseFilter(); |
84 | + | ||
85 | + if (!onSearching) { | ||
86 | + onSearching = true; | ||
87 | + | ||
79 | $.ajax({ | 88 | $.ajax({ |
80 | type: 'GET', | 89 | type: 'GET', |
81 | url: location.protocol + '//m.yohobuy.com/product/search/search', | 90 | url: location.protocol + '//m.yohobuy.com/product/search/search', |
@@ -83,8 +92,10 @@ function getGoodsList() { | @@ -83,8 +92,10 @@ function getGoodsList() { | ||
83 | xhrFields: { | 92 | xhrFields: { |
84 | withCredentials: true | 93 | withCredentials: true |
85 | }, | 94 | }, |
95 | + beforeSend: function() { | ||
96 | + $container.append('<div class="search-divide">正在加载...</div>'); | ||
97 | + }, | ||
86 | success: function(result) { | 98 | success: function(result) { |
87 | - let $container = $defaultgc; | ||
88 | 99 | ||
89 | switch (navType) { | 100 | switch (navType) { |
90 | case 'new': | 101 | case 'new': |
@@ -106,10 +117,38 @@ function getGoodsList() { | @@ -106,10 +117,38 @@ function getGoodsList() { | ||
106 | break; | 117 | break; |
107 | } | 118 | } |
108 | 119 | ||
120 | + $('.search-divide').remove(); | ||
121 | + if (isScrollLoad) { | ||
122 | + $container.append(result); | ||
123 | + } else { | ||
109 | $container.html(result); | 124 | $container.html(result); |
125 | + } | ||
110 | lazyLoad($container.find('.lazy')); | 126 | lazyLoad($container.find('.lazy')); |
127 | + onSearching = false; | ||
128 | + }, | ||
129 | + error: function() { | ||
130 | + let $divide = $('.search-divide'); | ||
131 | + | ||
132 | + $divide.text('加载失败,点击重试'); | ||
133 | + $divide.one('click', function() { | ||
134 | + $divide.text('正在加载...'); | ||
135 | + getGoodsList(); | ||
136 | + }); | ||
137 | + onSearching = false; | ||
111 | } | 138 | } |
112 | }); | 139 | }); |
140 | + } | ||
141 | +} | ||
142 | + | ||
143 | +/** | ||
144 | + * 当scroll到1/2$goodsContainer高度后继续请求下一页数据 | ||
145 | + */ | ||
146 | +function scrollHandler() { | ||
147 | + if ($filterBox.is(':visible') && $(window).scrollTop() > $goodsContainer.height() * 0.5) { | ||
148 | + isScrollLoad = true; | ||
149 | + Object.assign(defaultOpt, {page: page++}); | ||
150 | + getGoodsList(); | ||
151 | + } | ||
113 | } | 152 | } |
114 | 153 | ||
115 | /** | 154 | /** |
@@ -139,7 +178,7 @@ function getFilter() { | @@ -139,7 +178,7 @@ function getFilter() { | ||
139 | }); | 178 | }); |
140 | } | 179 | } |
141 | 180 | ||
142 | -Tab.prototype.getgoodslist = getGoodsList; // 获取商品列表 | 181 | +Tab.prototype.getgoodslist = getGoodsList; // 获取商品列表,点击全部商品 Tab 时获取 |
143 | Tab.prototype.filterhide = function() { // 隐藏筛选 TAB | 182 | Tab.prototype.filterhide = function() { // 隐藏筛选 TAB |
144 | $filterBox.css('display', 'none'); | 183 | $filterBox.css('display', 'none'); |
145 | }; | 184 | }; |
@@ -152,10 +191,11 @@ $listNav.bind('contextmenu', function() { | @@ -152,10 +191,11 @@ $listNav.bind('contextmenu', function() { | ||
152 | }); | 191 | }); |
153 | 192 | ||
154 | $listNav.on('touchend touchcancel', function(e) { | 193 | $listNav.on('touchend touchcancel', function(e) { |
194 | + isScrollLoad = false; | ||
195 | + | ||
155 | let $this = $(e.target).closest('li'); // 被点击的 Tab | 196 | let $this = $(e.target).closest('li'); // 被点击的 Tab |
156 | let $active; | 197 | let $active; |
157 | let nav; | 198 | let nav; |
158 | - let bpIdData = $(this).find('.buriedpoint').attr('data-bp-id') || ''; | ||
159 | 199 | ||
160 | if ($this.hasClass('filter')) { | 200 | if ($this.hasClass('filter')) { |
161 | 201 | ||
@@ -254,9 +294,15 @@ $listNav.on('touchend touchcancel', function(e) { | @@ -254,9 +294,15 @@ $listNav.on('touchend touchcancel', function(e) { | ||
254 | } | 294 | } |
255 | 295 | ||
256 | if (nav.reload) { | 296 | if (nav.reload) { |
257 | - $(document).trigger('shouldSendBpData', [bpIdData]); | ||
258 | - getGoodsList({filtering: true}); | 297 | + getGoodsList(); |
259 | } | 298 | } |
260 | } | 299 | } |
261 | }); | 300 | }); |
301 | + | ||
302 | +// 页面打开直接加载筛选项 | ||
262 | getFilter(); | 303 | getFilter(); |
304 | + | ||
305 | +// srcoll to load more | ||
306 | +$(window).scroll(function() { | ||
307 | + scrollHandler(); | ||
308 | +}); |
-
Please register or login to post a comment