Merge branch 'feature/wap323' into 'feature/wap323'

优化品牌一览页面导航切换用户体验。 code review by 张振

优化品牌一览页面导航切换用户体验。 code review by 张振

See merge request !96

@@ -7,6 +7,7 @@
 var $ = require('jquery'),
 var $ = require('jquery'),
     Hammer = require('yoho.hammer'),
     Hammer = require('yoho.hammer'),
     Swiper = require('yoho.iswiper'),
     Swiper = require('yoho.iswiper'),
+    loading = require('../plugin/loading'),
     lazyLoad = require('yoho.lazyload');
     lazyLoad = require('yoho.lazyload');
 
 
 var swiper,
 var swiper,
@@ -25,6 +26,8 @@ var brandsData,
     $keyword,
     $keyword,
     clearTextHammer;
     clearTextHammer;
 
 
+loading.showLoadingMask();
+
 //热门品牌滑动
 //热门品牌滑动
 hotBrandsSwiper = new Swiper('.brands-swiper', {
 hotBrandsSwiper = new Swiper('.brands-swiper', {
     grabCursor: true,
     grabCursor: true,
@@ -47,9 +50,14 @@ $('.yoho-header').css({
     top: 0
     top: 0
 });
 });
 
 
-if ($('.banner-top').length > 0) {
-    $('.hot-brands').css('padding-top', '0');
-}
+(function() {
+    if ($('.banner-top').length > 0) {
+        $('.hot-brands').css('padding-top', '0');
+    }
+
+    $('.hide-when-loading').show();
+    loading.hideLoadingMask();
+})();
 
 
 $fixTitleBar = $('<div class="title-bar fixed-title-bar"><h2></h2></div>');
 $fixTitleBar = $('<div class="title-bar fixed-title-bar"><h2></h2></div>');
 $fixTitleBar.css({
 $fixTitleBar.css({
@@ -181,8 +189,16 @@ if ($('.brand-search-page').length) {
 
 
 if ($genderItem.length > 0) {
 if ($genderItem.length > 0) {
     $genderItem.on('touchstart', function() {
     $genderItem.on('touchstart', function() {
+        var index = $(this).data('id') + 1;
+
         $('.genderNav ul .active').removeClass('active');
         $('.genderNav ul .active').removeClass('active');
         $(this).addClass('active');
         $(this).addClass('active');
-        window.location.search = 'channel=' + ($(this).data('id') + 1);
+        $('.hide-when-loading').hide();
+        loading.showLoadingMask();
+        function reload() {
+            window.location.search = 'channel=' + index;
+        }
+        setTimeout(reload.bind(this), 100);
     });
     });
 }
 }
+

@@ -2,6 +2,9 @@
     .re-pos-search {
     .re-pos-search {
         top: 170rem / $pxConvertRem !important;
         top: 170rem / $pxConvertRem !important;
     }
     }
+    .hide-when-loading {
+        display: none;
+    }
     .genderNav {
     .genderNav {
         display: block;
         display: block;
         width: 100%;
         width: 100%;

@@ -21,38 +21,40 @@
             </a>
             </a>
         </div>
         </div>
     </div>
     </div>
+    <div class="hide-when-loading">
+        {{# topData}}
+            {{! 头部banner}}
+            {{# bannerTop}}
+                {{> home/banner_top}}
+            {{/ bannerTop}}
 
 
-    {{# topData}}
-		{{! 头部banner}}
-		{{# bannerTop}}
-			{{> home/banner_top}}
-		{{/ bannerTop}}
+            {{! 热门品牌可滑动}}
+            {{# hotBrandsScroll}}
+                {{> home/hot_brands_swipe}}
+            {{/ hotBrandsScroll}}
+        {{/ topData}}
 
 
-		{{! 热门品牌可滑动}}
-		{{# hotBrandsScroll}}
-			{{> home/hot_brands_swipe}}
-		{{/ hotBrandsScroll}}
-    {{/ topData}}
-
-    {{# brandList}}
-    <div class="brand-list bar-{{@index}}">
-        <div class="title-bar">
-            <h2 style="position: static;">{{title}}</h2>
+        {{# brandList}}
+        <div class="brand-list bar-{{@index}}">
+            <div class="title-bar">
+                <h2 style="position: static;">{{title}}</h2>
+            </div>
+            {{# list}}
+            <p>
+                <a href="{{url}}">{{name}}
+                    {{# isHot}}
+                    <i class="icon-hot">HOT</i>
+                    {{/ isHot}}
+                    {{# isNew}}
+                    <i class="icon-new">NEW</i>
+                    {{/ isNew}}
+                </a>
+            </p>
+            {{/ list}}
         </div>
         </div>
-        {{# list}}
-        <p>
-            <a href="{{url}}">{{name}}
-                {{# isHot}}
-                <i class="icon-hot">HOT</i>
-                {{/ isHot}}
-                {{# isNew}}
-                <i class="icon-new">NEW</i>
-                {{/ isNew}}
-            </a>
-        </p>
-        {{/ list}}
+        {{/ brandList}}
     </div>
     </div>
-    {{/ brandList}}
+
 
 
     {{/channel}}
     {{/channel}}
 {{> layout/footer}}
 {{> layout/footer}}