Authored by ccbikai

star 首页优化

@@ -15,6 +15,16 @@ @@ -15,6 +15,16 @@
15 <a class="rank-avatar" href='{{url}}' data-avatar="{{image cover 180 180}}"></a> 15 <a class="rank-avatar" href='{{url}}' data-avatar="{{image cover 180 180}}"></a>
16 </li> 16 </li>
17 {{/ starAvatar}} 17 {{/ starAvatar}}
  18 + {{# starAvatar}}
  19 + <li class="swiper-slide">
  20 + <a class="rank-avatar" href='{{url}}' data-avatar="{{image cover 180 180}}"></a>
  21 + </li>
  22 + {{/ starAvatar}}
  23 + {{# starAvatar}}
  24 + <li class="swiper-slide">
  25 + <a class="rank-avatar" href='{{url}}' data-avatar="{{image cover 180 180}}"></a>
  26 + </li>
  27 + {{/ starAvatar}}
18 </ul> 28 </ul>
19 </div> 29 </div>
20 </div> 30 </div>
@@ -14,7 +14,8 @@ var $ = require('yoho-jquery'), @@ -14,7 +14,8 @@ var $ = require('yoho-jquery'),
14 14
15 var $window = $(window), 15 var $window = $(window),
16 $starArticle = $('.star-article'), 16 $starArticle = $('.star-article'),
17 - $headTab = $('.head-tab'), 17 +
  18 + // $headTab = $('.head-tab'),
18 stopLoading = false, 19 stopLoading = false,
19 avatarSwiper, 20 avatarSwiper,
20 avatarSwiperClone, 21 avatarSwiperClone,
@@ -71,12 +72,11 @@ function setIndexAction() { @@ -71,12 +72,11 @@ function setIndexAction() {
71 var commonHeaderTop = $('#yoho-header').outerHeight(), 72 var commonHeaderTop = $('#yoho-header').outerHeight(),
72 $loadingTip = $('.loading-tip'), 73 $loadingTip = $('.loading-tip'),
73 $avatarWrap = $('.avatar-wrap:not(.avatar-clone)'), 74 $avatarWrap = $('.avatar-wrap:not(.avatar-clone)'),
74 - avatarHeight = $('.avatar').height(),  
75 - infoTop = $('.star-info').css('margin-top'); 75 + avatarHeight = $('.avatar').height();
76 76
77 // 下拉刷新,上拉加载 77 // 下拉刷新,上拉加载
78 starIScroll = new PullRefresh('.star-wrap', { 78 starIScroll = new PullRefresh('.star-wrap', {
79 - height: $(window).height() - commonHeaderTop - avatarHeight - parseInt(infoTop, 10) * 2, 79 + height: $(window).height() - commonHeaderTop - avatarHeight,
80 pullDown: function() { 80 pullDown: function() {
81 if (!stopLoading) { 81 if (!stopLoading) {
82 stopLoading = true; 82 stopLoading = true;
@@ -93,7 +93,8 @@ function setIndexAction() { @@ -93,7 +93,8 @@ function setIndexAction() {
93 starIScroll.iScroll.on('scrollStart', function() { 93 starIScroll.iScroll.on('scrollStart', function() {
94 // 下拉 94 // 下拉
95 if (this.directionY === -1) { 95 if (this.directionY === -1) {
96 - $headTab.slideDown(); 96 +
  97 + // $headTab.slideDown();
97 $loadingTip.slideDown(); 98 $loadingTip.slideDown();
98 } 99 }
99 }); 100 });
@@ -127,9 +128,9 @@ function setIndexAction() { @@ -127,9 +128,9 @@ function setIndexAction() {
127 128
128 starIScroll.iScroll.on('scrollEnd', function() { 129 starIScroll.iScroll.on('scrollEnd', function() {
129 // 上滑 130 // 上滑
130 - if (this.directionY === 1) {  
131 - $headTab.slideUp(600);  
132 - } 131 + // if (this.directionY === 1) {
  132 + // $headTab.slideUp(600);
  133 + // }
133 134
134 $loadingTip.slideUp(); 135 $loadingTip.slideUp();
135 }); 136 });
@@ -195,20 +196,6 @@ function setIndexAction() { @@ -195,20 +196,6 @@ function setIndexAction() {
195 $(item).addClass('avatar-' + key); 196 $(item).addClass('avatar-' + key);
196 }); 197 });
197 198
198 - // banner swiper 初始化  
199 - if ($('.banner-swiper').find('li').length > 1) {  
200 - new Swiper('.banner-swiper', {  
201 - lazyLoading: true,  
202 - lazyLoadingInPrevNext: true,  
203 - loop: true,  
204 - autoplay: 3000,  
205 - autoplayDisableOnInteraction: false,  
206 - paginationClickable: true,  
207 - slideElement: 'li',  
208 - pagination: '.banner-top .pagination-inner'  
209 - });  
210 - }  
211 -  
212 // 明星头像 swiper 初始化 199 // 明星头像 swiper 初始化
213 if (bannerLen > 1) { 200 if (bannerLen > 1) {
214 avatarSwiper = new Swiper('.avatar-1', { 201 avatarSwiper = new Swiper('.avatar-1', {
@@ -234,6 +221,19 @@ function setIndexAction() { @@ -234,6 +221,19 @@ function setIndexAction() {
234 }); 221 });
235 } 222 }
236 223
  224 + // banner swiper 初始化
  225 + if ($('.banner-swiper').find('li').length > 1) {
  226 + new Swiper('.banner-swiper', {
  227 + lazyLoading: true,
  228 + lazyLoadingInPrevNext: true,
  229 + loop: true,
  230 + autoplay: 3000,
  231 + autoplayDisableOnInteraction: false,
  232 + paginationClickable: true,
  233 + slideElement: 'li',
  234 + pagination: '.banner-top .pagination-inner'
  235 + });
  236 + }
237 237
238 if ($('.star-info').find('li').length > 0) { 238 if ($('.star-info').find('li').length > 0) {
239 $starArticle.each(function(key, item) { 239 $starArticle.each(function(key, item) {
@@ -249,14 +249,14 @@ function setIndexAction() { @@ -249,14 +249,14 @@ function setIndexAction() {
249 avatarKey = $(this).index(); 249 avatarKey = $(this).index();
250 250
251 if (avatarKey >= (2 * bannerLen + 1)) { 251 if (avatarKey >= (2 * bannerLen + 1)) {
252 - avatarSwiperClone && avatarSwiperClone.slideTo(bannerLen + 1, 0);  
253 - avatarSwiper.slideTo(bannerLen + 1, 0); 252 + avatarSwiperClone && avatarSwiperClone.slideTo(bannerLen + 1, 200);
  253 + avatarSwiper.slideTo(bannerLen + 1, 200);
254 } else if (avatarKey <= (bannerLen - 1)) { 254 } else if (avatarKey <= (bannerLen - 1)) {
255 - avatarSwiperClone && avatarSwiperClone.slideTo(2 * bannerLen - 1, 0);  
256 - avatarSwiper.slideTo(2 * bannerLen - 1, 0); 255 + avatarSwiperClone && avatarSwiperClone.slideTo(2 * bannerLen - 1, 200);
  256 + avatarSwiper.slideTo(2 * bannerLen - 1, 200);
257 } else { 257 } else {
258 - avatarSwiperClone && avatarSwiperClone.slideTo(avatarKey, 0);  
259 - avatarSwiper.slideTo(avatarKey, 0); 258 + avatarSwiperClone && avatarSwiperClone.slideTo(avatarKey, 200);
  259 + avatarSwiper.slideTo(avatarKey, 200);
260 } 260 }
261 261
262 return false; 262 return false;
@@ -294,7 +294,7 @@ getIndexHtml = function() { @@ -294,7 +294,7 @@ getIndexHtml = function() {
294 $starMain.html(data); 294 $starMain.html(data);
295 bannerLen = $('.avatar .swiper-slide').length; 295 bannerLen = $('.avatar .swiper-slide').length;
296 296
297 - if ($('.avatar-clone')) { 297 + if ($('.avatar-clone').length) {
298 $('.avatar-clone').remove(); 298 $('.avatar-clone').remove();
299 } 299 }
300 300
@@ -309,11 +309,11 @@ getIndexHtml = function() { @@ -309,11 +309,11 @@ getIndexHtml = function() {
309 txtLimit($(this), '.title', '.cont-txt'); 309 txtLimit($(this), '.title', '.cont-txt');
310 }); 310 });
311 311
312 - loading.hideLoadingMask();  
313 lazyLoad($('img.lazy')); 312 lazyLoad($('img.lazy'));
314 313
315 setTimeout(function() { 314 setTimeout(function() {
316 setIndexAction(); 315 setIndexAction();
  316 + loading.hideLoadingMask();
317 }, 100); 317 }, 100);
318 318
319 }, 319 },