filter-data-load

@@ -25,13 +25,20 @@
     <div class="tab">
     <div class="tab">
         <ul class="shop-tabs tab-navs" data-sticky>
         <ul class="shop-tabs tab-navs" data-sticky>
             <li class="shop-tab-nav tab-nav active">
             <li class="shop-tab-nav tab-nav active">
-                <a href="#red-index" data-trigger="tab">红人首页</a>
+                <a href="#red-index" data-trigger="tab" data-funFilterHide>红人首页</a>
             </li>
             </li>
             <em>|</em>
             <em>|</em>
             <li class="shop-tab-nav tab-nav">
             <li class="shop-tab-nav tab-nav">
-                <a href="#all-goods" data-trigger="tab" data-funGetFilter data-funGetGoodsList>全部商品</a>
+                <a href="#all-goods" data-trigger="tab"
+                    data-funFilterShow
+                    data-funGetGoodsList>全部商品</a>
             </li>
             </li>
         </ul>
         </ul>
+        {{!--筛选tab--}}
+        <div class="filter-box">
+            {{> product/filter-tab}}
+            {{> common/filter}}
+        </div>
         <div class="tab-panels">
         <div class="tab-panels">
             {{!--shop-tab: 红人首页--}}
             {{!--shop-tab: 红人首页--}}
             <div id="red-index" class="tab-panel active">
             <div id="red-index" class="tab-panel active">
@@ -137,9 +144,6 @@
             {{!--shop-tab: 全部商品--}}
             {{!--shop-tab: 全部商品--}}
             <div id="all-goods" class="tab-panel">
             <div id="all-goods" class="tab-panel">
                 <div class="good-list-page yoho-page">
                 <div class="good-list-page yoho-page">
-                    {{!--筛选tab--}}
-                    {{> product/filter-tab}}
-
                      <div id="goods-container" class="goods-container">
                      <div id="goods-container" class="goods-container">
                         <div class="firstscreen-goods container clearfix"></div>
                         <div class="firstscreen-goods container clearfix"></div>
                         {{!--<div class="search-divide">正在加载...</div>--}}
                         {{!--<div class="search-divide">正在加载...</div>--}}
@@ -148,7 +152,6 @@
                         <div class="sale-goods container clearfix"></div>
                         <div class="sale-goods container clearfix"></div>
                         <div class="price-goods container clearfix hide"></div>
                         <div class="price-goods container clearfix hide"></div>
                         <div class="discount-goods container clearfix hide"></div>
                         <div class="discount-goods container clearfix hide"></div>
-                        {{> common/filter}}
                     </div>
                     </div>
                 </div>
                 </div>
             </div>
             </div>

@@ -21,9 +21,9 @@ let $pgc = $goodsContainer.children('.price-goods');
 let $dgc = $goodsContainer.children('.discount-goods');
 let $dgc = $goodsContainer.children('.discount-goods');
 let $listNav = $('#list-nav'); // 筛选项列表
 let $listNav = $('#list-nav'); // 筛选项列表
 let $pre = $listNav.find('.active'); // 记录进入筛选前的active项，初始为选中项
 let $pre = $listNav.find('.active'); // 记录进入筛选前的active项，初始为选中项
+let $filterBox = $('.filter-box');
 let $filterBody = $('.filter-body');
 let $filterBody = $('.filter-body');
 
 
-let allGoodsTabClickTimes = 0;
 let navInfo = {
 let navInfo = {
     price: {
     price: {
         order: 1,
         order: 1,
@@ -116,39 +116,36 @@ function getGoodsList() {
  * 加载筛选数据
  * 加载筛选数据
  */
  */
 function getFilter() {
 function getFilter() {
-    if (allGoodsTabClickTimes === 0) {
-        // 第一次点进来调用
-
-        $.ajax({
-            type: 'GET',
-            url: location.protocol + '//m.yohobuy.com/product/search/filter',
-            data: defaultOpt,
-            success: function(data) {
-                if (data) { // 判断需要再严禁些，确定数据正常后再 ++
-                    allGoodsTabClickTimes++;
-                }
-                $goodsContainer.append(data);
+    $.ajax({
+        type: 'GET',
+        url: location.protocol + '//m.yohobuy.com/product/search/filter',
+        data: defaultOpt,
+        success: function(data) {
+            $goodsContainer.append(data);
 
 
-                // 初始化filter&注册filter回调
-                filter.initFilter({
-                    fCbFn: getGoodsList,
-                    hCbFn: function() {
+            // 初始化filter&注册filter回调
+            filter.initFilter({
+                fCbFn: getGoodsList,
+                hCbFn: function() {
 
 
-                        // 切换active状态到$pre上
-                        $pre.addClass('active');
-                        $pre.siblings('.filter').removeClass('active');
-                    }
-                });
+                    // 切换active状态到$pre上
+                    $pre.addClass('active');
+                    $pre.siblings('.filter').removeClass('active');
+                }
+            });
 
 
-                $filterBody = $('.filter-body');
-            }
-        });
-    }
+            $filterBody = $('.filter-body');
+        }
+    });
 }
 }
 
 
-// 绑定 getfilter 方法，在点击全部商品 Tab 时调用
-Tab.prototype.getfilter = getFilter;
-Tab.prototype.getgoodslist = getGoodsList;
+Tab.prototype.getgoodslist = getGoodsList; // 获取商品列表
+Tab.prototype.filterhide = function() { // 隐藏筛选 TAB
+    $filterBox.css('display', 'none');
+};
+Tab.prototype.filtershow = function() { // 显示筛选 TAB
+    $filterBox.css('display', 'block');
+};
 
 
 $listNav.bind('contextmenu', function() {
 $listNav.bind('contextmenu', function() {
     return false;
     return false;
@@ -262,3 +259,4 @@ $listNav.on('touchend touchcancel', function(e) {
         }
         }
     }
     }
 });
 });
+getFilter();

+.filter-box {
+    display: none;
+
+    .list-nav {
+        border-top: 2px solid #fff;
+        border-bottom: 1px solid #e6e6e6;
+
+        > li {
+            float: left;
+            width: 20%;
+            height: 33PX;
+            line-height: 33PX;
+            text-align: center;
+            font-size: 14PX;
+        }
+
+        .bytouch {
+            background: #eee;
+        }
+
+        a {
+            display: block;
+            box-sizing: border-box;
+            width: 100%;
+            height: 100%;
+            color: #999;
+        }
+
+        .nav-txt {
+            display: inline-block;
+            height: 100%;
+            box-sizing: border-box;
+        }
+
+        .active > a {
+            color: #000;
+
+            .iconfont {
+                color: #999;
+
+                &.cur {
+                    color: #000;
+                }
+            }
+        }
+
+        .new .iconfont {
+            transform: scale(0.8);
+            font-weight: bold;
+            font-size: 12PX;
+        }
+
+        .filter .iconfont {
+            font-size: 12PX;
+            transition: transform 0.1 ease-in;
+        }
+
+        .filter.active .iconfont {
+            transform: rotate(-180deg);
+        }
+
+        .icon {
+            position: relative;
+
+            i {
+                position: absolute;
+                transform: scale(0.8);
+                font-weight: bold;
+            }
+
+            .up {
+                top: -11PX;
+            }
+
+            .down {
+                top: -4PX;
+            }
+        }
+    }
+}

@@ -5,3 +5,4 @@
 @import "reds-shop/header";
 @import "reds-shop/header";
 @import "reds-shop/nav-tab";
 @import "reds-shop/nav-tab";
 @import "reds-shop/section";
 @import "reds-shop/section";
+@import "reds-shop/nav";