Authored by uedxwg

hotrank

@@ -30,26 +30,15 @@ function hotrank(page, sort, tabId, notab) { @@ -30,26 +30,15 @@ function hotrank(page, sort, tabId, notab) {
30 lazyLoad($('img.lazy')); 30 lazyLoad($('img.lazy'));
31 $('#yoho-footer').css('position', 'static'); 31 $('#yoho-footer').css('position', 'static');
32 $('.rank-main ul li:gt(2)').find('.item-content i').removeClass('top'); 32 $('.rank-main ul li:gt(2)').find('.item-content i').removeClass('top');
  33 + winH = $(window).height();
  34 + if ($('.rank-main').length !== 0) {
  35 + listTop = $('.rank-main').find('ul').offset().top;
  36 + }
33 navSwiper = new Swiper('.s-goods-nav', { 37 navSwiper = new Swiper('.s-goods-nav', {
34 grabCursor: true, 38 grabCursor: true,
35 slidesPerView: 'auto', 39 slidesPerView: 'auto',
36 slideElement: 'li' 40 slideElement: 'li'
37 }); 41 });
38 -  
39 - winH = $(window).height();  
40 - listTop = $('.rank-main').find('ul').offset().top;  
41 - $('.s-goods-nav .nav-item').each(function(index) {  
42 - hotnav = new Hammer($('.s-goods-nav .nav-item')[index]);  
43 - hotnav.on('tap', function(e) {  
44 - var navItme = $('.s-goods-nav .nav-item').eq(index);  
45 -  
46 - id = navItme.data('id') ? navItme.data('id') : '';  
47 - sort = navItme.data('sort') ? navItme.data('sort') : '';  
48 - page = 1;  
49 - notab = 1;  
50 - hotrank(page, sort, id, notab);  
51 - });  
52 - });  
53 } 42 }
54 }); 43 });
55 } 44 }
@@ -67,3 +56,18 @@ $(window).scroll(function () { @@ -67,3 +56,18 @@ $(window).scroll(function () {
67 56
68 }); 57 });
69 hotrank(page, sort, id, notab); 58 hotrank(page, sort, id, notab);
  59 +hotnav = new Hammer(document.getElementById('hotRank'));
  60 +hotnav.on('tap', function (e) {
  61 + var ev = ev || window.event;
  62 + var target = ev.target || ev.srcElement;
  63 +
  64 + if (target.nodeName.toLowerCase() === 'span') {
  65 + $('.s-goods-nav .nav-item').removeClass('active');
  66 + target.parentNode.className = 'active ' + target.parentNode.className;
  67 + id = target.getAttribute('data-id') ? target.getAttribute('data-id') : '';
  68 + sort = target.getAttribute('data-sort') ? target.getAttribute('data-sort') : '';
  69 + page = 1;
  70 + notab = 1;
  71 + hotrank(page, sort, id, notab);
  72 + }
  73 +})
@@ -74,7 +74,7 @@ @@ -74,7 +74,7 @@
74 overflow: hidden; 74 overflow: hidden;
75 white-space: nowrap; 75 white-space: nowrap;
76 76
77 - span { 77 + b {
78 text-decoration: line-through; 78 text-decoration: line-through;
79 color: #b0b0b0; 79 color: #b0b0b0;
80 margin-left: 10rem / $pxConvertRem; 80 margin-left: 10rem / $pxConvertRem;
@@ -125,12 +125,20 @@ @@ -125,12 +125,20 @@
125 } 125 }
126 126
127 .s-goods-nav { 127 .s-goods-nav {
  128 + box-sizing:border-box;
  129 + -moz-box-sizing:border-box;
  130 + -webkit-box-sizing:border-box;
128 overflow: hidden; 131 overflow: hidden;
129 132
130 li { 133 li {
131 margin: 0 0 0 (50rem / $pxConvertRem); 134 margin: 0 0 0 (50rem / $pxConvertRem);
132 width: auto; 135 width: auto;
133 - 136 + height: 95%;
  137 + color: #999;
  138 + &.active{
  139 + color: #000;
  140 + border-bottom:2px solid #000;
  141 + }
134 a { 142 a {
135 padding: 0; 143 padding: 0;
136 } 144 }
@@ -3,8 +3,8 @@ @@ -3,8 +3,8 @@
3 <ul class="swiper-wrapper clearfix"> 3 <ul class="swiper-wrapper clearfix">
4 {{# tabs}} 4 {{# tabs}}
5 {{# title}} 5 {{# title}}
6 - <li class="swiper-slide nav-item" data-sort="{{ params}}" data-id="{{ id}}">  
7 - <span>{{ name}}</span> 6 + <li class="swiper-slide nav-item">
  7 + <span data-sort="{{ params}}" data-id="{{ id}}" >{{ name}}</span>
8 </li> 8 </li>
9 {{/ title}} 9 {{/ title}}
10 {{/ tabs}} 10 {{/ tabs}}
@@ -25,7 +25,7 @@ @@ -25,7 +25,7 @@
25 {{# active}} 25 {{# active}}
26 <p>{{.}}</p> 26 <p>{{.}}</p>
27 {{/ active}} 27 {{/ active}}
28 - <p>{{salePrice}}<span>{{price}}</span></p> 28 + <p>{{salePrice}}<b>{{price}}</b></p>
29 </div> 29 </div>
30 </a> 30 </a>
31 </li> 31 </li>