修复多余线条的问题，并添加滚动切换

@@ -35,7 +35,6 @@
             </div>
             </div>
             {{/if}}
             {{/if}}
             {{> group/resources/filter-tab}}
             {{> group/resources/filter-tab}}
-
         </div>
         </div>
         <div id="goodsContainer">
         <div id="goodsContainer">
             {{#if filterList.length}}
             {{#if filterList.length}}

@@ -3,12 +3,12 @@
         <div class="guess-scroll">
         <div class="guess-scroll">
             {{#each data}}
             {{#each data}}
                 {{#ifcond @index '==' 0}}
                 {{#ifcond @index '==' 0}}
-                    <div class="guess-tab first" data-query="{{queryString}}">
+                    <div id="tab-{{@index}}" class="guess-tab first" data-query="{{queryString}}">
                         <img class="guess-img" src="{{image2 src w=200 h=160 q=60 mode=3}}" />
                         <img class="guess-img" src="{{image2 src w=200 h=160 q=60 mode=3}}" />
                         <div class=""></div>
                         <div class=""></div>
                     </div>
                     </div>
                 {{^}}
                 {{^}}
-                    <div class="guess-tab" data-query="{{queryString}}">
+                    <div id="tab-{{@index}}" data-index="{{@index}}" class="guess-tab" data-query="{{queryString}}">
                         <img class="guess-img" src="{{image2 src w=200 h=160 q=60 mode=3}}" />
                         <img class="guess-img" src="{{image2 src w=200 h=160 q=60 mode=3}}" />
                         <div></div>
                         <div></div>
                     </div>
                     </div>

@@ -231,6 +231,7 @@ class Group extends Page {
     guessLikeTabChange(e) {
     guessLikeTabChange(e) {
         let $this = $(e.currentTarget);
         let $this = $(e.currentTarget);
         let query = $this.data('query');
         let query = $this.data('query');
+        let index = $this.data('index');
         let queryObject = {};
         let queryObject = {};
         let newNavType = this.judgeNavType(this.newFilterTab);
         let newNavType = this.judgeNavType(this.newFilterTab);
         let newNav = this.newNavInfo[newNavType];
         let newNav = this.newNavInfo[newNavType];
@@ -241,6 +242,9 @@ class Group extends Page {
         queryObject.page = 1;
         queryObject.page = 1;
         newNav.page = 1;
         newNav.page = 1;
         newNav.query = queryObject;
         newNav.query = queryObject;
+        let lastDom = document.getElementById(`tab-${index - 2}`);
+
+        $('.wapper').animate({scrollLeft: lastDom && lastDom.offsetLeft || 0});
 
 
         $.ajax({
         $.ajax({
             type: 'GET',
             type: 'GET',

@@ -7,6 +7,8 @@
         overflow-x: scroll;
         overflow-x: scroll;
         -ms-overflow-style: none;
         -ms-overflow-style: none;
         overflow: -moz-scrollbars-none;
         overflow: -moz-scrollbars-none;
+        -webkit-overflow-scrolling: touch;
+        height: 110px;
 
 
         .guess-scroll {
         .guess-scroll {
             display: flex;
             display: flex;
@@ -14,6 +16,7 @@
             flex-wrap: nowrap;
             flex-wrap: nowrap;
             width: auto;
             width: auto;
             min-width: 100%;
             min-width: 100%;
+            height: 88px;
 
 
             .guess-tab {
             .guess-tab {
                 min-width: 160px;
                 min-width: 160px;
@@ -33,12 +36,16 @@
     }
     }
 
 
     .guess-tab-active {
     .guess-tab-active {
-        height: 4px;
+        margin-top: -10px;
+        height: 2px;
         width: 70%;
         width: 70%;
         background-color: #222;
         background-color: #222;
     }
     }
 
 
-    .wapper::-webkit-scrollbar { width: 0 !important; }
+    .wapper::-webkit-scrollbar {
+        width: 0 !important;
+        display: none;
+    }
 }
 }
 
 
 .guess-like.float {
 .guess-like.float {