fe / YOHOBUYWAP · Commits

Go to a project

Authored by zhangxiaoru
Commit cd546a9273ca66b88dbfe9bfdb84829adcbc179b 1 parent 87eed840

首页

Inline Side-by-side
Showing 6 changed files with 172 additions and 170 deletions
@@ -17,6 +17,7 @@ var $ = require('jquery'), @@ -17,6 +17,7 @@ var $ = require('jquery'),
17 scH, 17 scH,
18 $nav1 = $('#pos-nav'), 18 $nav1 = $('#pos-nav'),
19 $nav2 = $('#pos-list'), 19 $nav2 = $('#pos-list'),
  20 + sTop,
20 isIphone = navigator.userAgent.indexOf('iPhone') > 0 ? true : false;//判断浏览器类型 21 isIphone = navigator.userAgent.indexOf('iPhone') > 0 ? true : false;//判断浏览器类型
21 22
22 var tip = require('../plugin/tip'), 23 var tip = require('../plugin/tip'),
@@ -61,6 +62,166 @@ var $listNav = $('#list-nav'), @@ -61,6 +62,166 @@ var $listNav = $('#list-nav'),
61 $pre = $listNav.find('.active'), //纪录进入筛选前的active项，初始为选中项 62 $pre = $listNav.find('.active'), //纪录进入筛选前的active项，初始为选中项
62 searching; 63 searching;
63 64
  65 +//焦点效果
  66 +if ($('.banner-swiper').find('li').size() > 1) {
  67 + bannerSwiper = new Swiper('.banner-swiper', {
  68 + lazyLoading: true,
  69 + lazyLoadingInPrevNext: true,
  70 + loop: true,
  71 + autoplay: 3000,
  72 + autoplayDisableOnInteraction: false,
  73 + paginationClickable: true,
  74 + slideElement: 'li',
  75 + pagination: '.banner-top .pagination-inner'
  76 + });
  77 +}
  78 +
  79 +if ($('.multi-browse').find('li').size() > 1) {
  80 + multiSwiper = new Swiper('.multi-browse', {
  81 + lazyLoading: true,
  82 + lazyLoadingInPrevNext: true,
  83 + lazyLoadingOnTransitionStart: true,
  84 + grabCursor: true,
  85 + slidesPerView: 'auto',
  86 + slideElement: 'li',
  87 + watchSlidesVisibility: true
  88 + });
  89 +}
  90 +
  91 +function tabChange(dom, index) {
  92 + var li = dom.eq(index),
  93 + sortSize = li.find('.iconfont').length;
  94 +
  95 + dom.removeClass('active');
  96 + li.addClass('active');
  97 +
  98 + dom.removeClass('color');
  99 + li.addClass('color');
  100 +}
  101 +
  102 +//首页导航
  103 +$.jqtab = function(nav, posNav, main) {
  104 +
  105 + $(nav + ' li, ' + posNav + ' li').on('touchstart', function() {
  106 + var index = $(this).index(),
  107 + activeTab = $(this).attr('tab');
  108 +
  109 + tabChange($(nav + ' li'), index);
  110 + tabChange($(posNav + ' li'), index);
  111 +
  112 + $(main).hide();
  113 + $('#' + activeTab).fadeIn();
  114 +
  115 + return false;
  116 + });
  117 +};
  118 +$.jqtab('#nav','#pos-nav','.main');
  119 +
  120 +$('#wrapper').addClass('scroll-wrapper');
  121 +lazyLoad($('img.lazy'));
  122 +
  123 +
  124 +myScroll = new IScroll('#wrapper', {
  125 + probeType: 3,
  126 + mouseWheel: true,
  127 + click: true
  128 +});
  129 +
  130 +myScroll.on('scroll', function() {
  131 + sTop = -this.y;
  132 +
  133 + if (sTop < imgH) {
  134 + if (!$nav1.hasClass('hide')) {
  135 + $nav1.addClass('hide');
  136 + }
  137 + if (!$nav2.hasClass('hide')) {
  138 + $nav2.addClass('hide');
  139 + } //滑动距离不到导航1
  140 + } else if (sTop < imgH + nav1H + main1oH) {
  141 + if ($nav1.hasClass('hide')) {
  142 + $nav1.removeClass('hide');
  143 + }
  144 + if (!$nav2.hasClass('hide')) {
  145 + $nav2.addClass('hide');
  146 + }//滑动距离不到导航2
  147 +
  148 + if (sTop < imgH + main1H) {
  149 + if (!$nav1.hasClass('fixed-top')) {
  150 + $nav1.addClass('fixed-top')
  151 + .removeClass('absolute')
  152 + .css({
  153 + transform: 'translate(0, ' + (- scH) + 'px)'
  154 + });
  155 + }
  156 + } else if (sTop < imgH + nav1H + main1H) {
  157 + if (!$nav1.hasClass('absolute')) {
  158 + $nav1.addClass('absolute')
  159 + .removeClass('fixed-top');
  160 + }
  161 + $nav1.css({
  162 + transform: 'translate(0, ' + (imgH + main1H - sTop - scH) + 'px)'
  163 + });
  164 + }
  165 + } else {
  166 + if (!$nav1.hasClass('hide')) {
  167 + $nav1.addClass('hide');
  168 + }
  169 + if ($nav2.hasClass('hide')) {
  170 + $nav2.removeClass('hide');
  171 + console.log(1)
  172 + }
  173 + console.log(sTop + '-----' + scH);
  174 +
  175 + if (sTop < scH) {
  176 + if (!$nav2.hasClass('fixed-top')) {
  177 + $nav2.addClass('fixed-top')
  178 + .removeClass('absolute')
  179 + .css({
  180 + transform: 'translate(0, ' + (- scH) + 'px)'
  181 + });
  182 + }
  183 + }
  184 + // else {
  185 + // if (!$nav2.hasClass('absolute')) {
  186 + // $nav1.addClass('absolute')
  187 + // .removeClass('fixed-top');
  188 + // }
  189 + // $nav2.css({
  190 + // transform: 'translate(0, ' + (imgH + nav1H + main1oH + main2oH -sTop - scH) + 'px)'
  191 + // });
  192 + // }
  193 + }
  194 +
  195 + $("#scroller").trigger('scroll');
  196 +});
  197 +
  198 +
  199 +
  200 +document.addEventListener('touchmove', function(e) {
  201 + e.preventDefault();
  202 +}, false);
  203 +
  204 +if (!isIphone) {
  205 + return;
  206 +}
  207 +
  208 +
  209 +//window onload 后重新refresh iscroll
  210 +$(window).load(function() {
  211 + myScroll && myScroll.refresh();
  212 + imgH = $('#nav-top').outerHeight();
  213 + nav1H = $('#nav').outerHeight();
  214 + main1H = $('#nav-main').height();
  215 + main1oH = $('#nav-main').outerHeight();
  216 + nav2H = $('#list-nav').outerHeight();
  217 + main2oH = $('#goods-container').outerHeight();
  218 + setTimeout(function(){
  219 + scH = $('#scroller').outerHeight();
  220 + console.log(scH)
  221 + },2000);
  222 +});
  223 +
  224 +
64 function search(opt) { 225 function search(opt) {
65 var setting = {}, 226 var setting = {},
66 ext, 227 ext,
@@ -202,6 +363,9 @@ function search(opt) { @@ -202,6 +363,9 @@ function search(opt) {
202 loading.hideLoadingMask(); 363 loading.hideLoadingMask();
203 364
204 window.rePosFooter(); 365 window.rePosFooter();
  366 +
  367 + scH = $('#scroller').outerHeight();
  368 + console.log(scH)
205 }, 369 },
206 error: function() { 370 error: function() {
207 tip.show('网络断开连接了~'); 371 tip.show('网络断开连接了~');
@@ -336,8 +500,9 @@ $listNav.on('touchend touchcancel', function(e) { @@ -336,8 +500,9 @@ $listNav.on('touchend touchcancel', function(e) {
336 function scrollHandler() { 500 function scrollHandler() {
337 501
338 //当scroll到1/4$goodsContainer高度后继续请求下一页数据 502 //当scroll到1/4$goodsContainer高度后继续请求下一页数据
339 - if ($(window).scrollTop() + winH >  
340 - $(document).height() - 0.25 * $goodsContainer.height() - 50) { 503 + myScroll && myScroll.refresh();
  504 +
  505 + if (sTop + winH > $('#scroller').height() - 0.25 * $goodsContainer.height() - 50){
341 if ($pre !== undefined) { 506 if ($pre !== undefined) {
342 search(); 507 search();
343 } 508 }
@@ -359,169 +524,6 @@ $listNav.on('touchstart', 'li', function(e) { @@ -359,169 +524,6 @@ $listNav.on('touchstart', 'li', function(e) {
359 }); 524 });
360 525
361 526
362 -  
363 -  
364 -  
365 -// lazyLoad($('img.lazy'));  
366 -//焦点效果  
367 -if ($('.banner-swiper').find('li').size() > 1) {  
368 - bannerSwiper = new Swiper('.banner-swiper', {  
369 - lazyLoading: true,  
370 - lazyLoadingInPrevNext: true,  
371 - loop: true,  
372 - autoplay: 3000,  
373 - autoplayDisableOnInteraction: false,  
374 - paginationClickable: true,  
375 - slideElement: 'li',  
376 - pagination: '.banner-top .pagination-inner'  
377 - });  
378 -}  
379 -  
380 -if ($('.multi-browse').find('li').size() > 1) {  
381 - multiSwiper = new Swiper('.multi-browse', {  
382 - lazyLoading: true,  
383 - lazyLoadingInPrevNext: true,  
384 - lazyLoadingOnTransitionStart: true,  
385 - grabCursor: true,  
386 - slidesPerView: 'auto',  
387 - slideElement: 'li',  
388 - watchSlidesVisibility: true  
389 - });  
390 -}  
391 -  
392 -function tabChange(dom, index) {  
393 - var li = dom.eq(index),  
394 - sortSize = li.find('.iconfont').length;  
395 -  
396 - dom.removeClass('active');  
397 - li.addClass('active');  
398 -  
399 - dom.removeClass('color');  
400 - li.addClass('color');  
401 -}  
402 -  
403 -//首页导航  
404 -$.jqtab = function(nav, posNav, main) {  
405 -  
406 - $(nav + ' li, ' + posNav + ' li').on('touchstart', function() {  
407 - var index = $(this).index(),  
408 - activeTab = $(this).attr('tab');  
409 -  
410 - tabChange($(nav + ' li'), index);  
411 - tabChange($(posNav + ' li'), index);  
412 -  
413 - $(main).hide();  
414 - $('#' + activeTab).fadeIn();  
415 -  
416 - return false;  
417 - });  
418 -};  
419 -$.jqtab('#nav','#pos-nav','.main');  
420 -  
421 -$(function(){  
422 -  
423 - $('#wrapper').addClass('scroll-wrapper');  
424 - lazyLoad($('img.lazy'));  
425 -  
426 - setTimeout(function(){  
427 - myScroll = new IScroll('#wrapper', {  
428 - probeType: 3,  
429 - mouseWheel: true,  
430 - click: true  
431 - });  
432 -  
433 - // lazyLoad($('img.lazy'), {  
434 - // container: $("#scroller")  
435 - // });  
436 -  
437 - myScroll.on('scroll', function() {  
438 - var sTop = -this.y;  
439 -  
440 - if (sTop < imgH) {  
441 - if (!$nav1.hasClass('hide')) {  
442 - $nav1.addClass('hide');  
443 - }  
444 - if (!$nav2.hasClass('hide')) {  
445 - $nav2.addClass('hide');  
446 - } //滑动距离不到导航1  
447 - } else if (sTop < imgH + nav1H + main1oH) {  
448 - if ($nav1.hasClass('hide')) {  
449 - $nav1.removeClass('hide');  
450 - }  
451 - if (!$nav2.hasClass('hide')) {  
452 - $nav2.addClass('hide');  
453 - }//滑动距离不到导航2  
454 -  
455 - if (sTop < imgH + main1H) {  
456 - if (!$nav1.hasClass('fixed-top')) {  
457 - $nav1.addClass('fixed-top')  
458 - .removeClass('absolute')  
459 - .css({  
460 - transform: 'translate(0, ' + (- scH) + 'px)'  
461 - });  
462 - }  
463 - } else if (sTop < imgH + nav1H + main1H) {  
464 - if (!$nav1.hasClass('absolute')) {  
465 - $nav1.addClass('absolute')  
466 - .removeClass('fixed-top');  
467 - }  
468 - $nav1.css({  
469 - transform: 'translate(0, ' + (imgH + main1H - sTop - scH) + 'px)'  
470 - });  
471 - }  
472 - } else {  
473 - if (!$nav1.hasClass('hide')) {  
474 - $nav1.addClass('hide');  
475 - }  
476 - if ($nav2.hasClass('hide')) {  
477 - $nav2.removeClass('hide');  
478 - }  
479 -  
480 - if (sTop < imgH + nav1H + main1oH + nav2H + main2oH) {  
481 - if (!$nav2.hasClass('fixed-top')) {  
482 - $nav2.addClass('fixed-top')  
483 - .removeClass('absolute')  
484 - .css({  
485 - transform: 'translate(0, ' + (- scH) + 'px)'  
486 - });  
487 - }  
488 - } else {  
489 - if (!$nav2.hasClass('absolute')) {  
490 - $nav1.addClass('absolute')  
491 - .removeClass('fixed-top');  
492 - }  
493 - $nav2.css({  
494 - transform: 'translate(0, ' + (imgH + nav1H + main1oH + main2oH -sTop - scH) + 'px)'  
495 - });  
496 - }  
497 - }  
498 -  
499 - $("#scroller").trigger('scroll');  
500 - });  
501 - }, 1000)  
502 -  
503 -  
504 - document.addEventListener('touchmove', function(e) {  
505 - e.preventDefault();  
506 - }, false);  
507 -  
508 - if (!isIphone) {  
509 - return;  
510 - }  
511 -})  
512 -  
513 -//window onload 后重新refresh iscroll  
514 -$(window).load(function() {  
515 - myScroll && myScroll.refresh();  
516 - imgH = $('#nav-top').outerHeight();  
517 - nav1H = $('#nav').outerHeight();  
518 - main1H = $('#nav-main').height();  
519 - main1oH = $('#nav-main').outerHeight();  
520 - nav2H = $('#list-nav').outerHeight();  
521 - main2oH = $('#goods-container').outerHeight();  
522 - scH = $('#scroller').outerHeight();  
523 -});  
524 -  
525 //底部导航点击 527 //底部导航点击
526 function fotterClick(group) { 528 function fotterClick(group) {
527 $(group + ' li').on('touchstart', function() { 529 $(group + ' li').on('touchstart', function() {
@@ -22,7 +22,7 @@ @@ -22,7 +22,7 @@
22 height: 100px; 22 height: 100px;
23 } 23 }
24 24
25 - .name { 25 + .store-name {
26 color: #fff; 26 color: #fff;
27 font-size: 28px; 27 font-size: 28px;
28 position: absolute; 28 position: absolute;
@@ -136,7 +136,7 @@ @@ -136,7 +136,7 @@
136 overflow: hidden; 136 overflow: hidden;
137 137
138 p { 138 p {
139 - font-size: 28px; 139 + font-size: 30px;
140 } 140 }
141 } 141 }
142 142
@@ -332,7 +332,7 @@ @@ -332,7 +332,7 @@
332 332
333 .search-area { 333 .search-area {
334 @extend .search-page; 334 @extend .search-page;
335 - margin-top: 85px; 335 + padding-top: 85px;
336 } 336 }
337 337
338 .hide { 338 .hide {
@@ -20,7 +20,7 @@ @@ -20,7 +20,7 @@
20 <div class="branner-top"> 20 <div class="branner-top">
21 <img src="{{branerImg}}"> 21 <img src="{{branerImg}}">
22 <img class="logo" src="{{logoImg}}"> 22 <img class="logo" src="{{logoImg}}">
23 - <p class="name">{{storeName}}</p> 23 + <p class="store-name">{{storeName}}</p>
24 <div class="collect"> 24 <div class="collect">
25 {{#if collect}} 25 {{#if collect}}
26 <img src="{{alreadyCollect}}"></img> 26 <img src="{{alreadyCollect}}"></img>
@@ -120,7 +120,7 @@ @@ -120,7 +120,7 @@
120 </li> 120 </li>
121 </ul> 121 </ul>
122 122
123 - <ul id="pos-list " class="list-nav clearfixnav hide discount-area"> 123 + <ul id="pos-list" class="nav hide">
124 <li class="new active"> 124 <li class="new active">
125 <a href="javascript:void(0);"> 125 <a href="javascript:void(0);">
126 <span class="spanTest">最新</span> 126 <span class="spanTest">最新</span>