文章分类滚动

src/pages/tabs/discover/discover.html

@@ -55,10 +55,10 @@
     <div #fixedTab>
         <div class="fixed-toolbar parent-toolbar">
             <div class="tabs-fixed ">
-                <div  (scroll)="dragTo($event)" class="scroll-tab">
+                <div #scrollTab class="scroll-tab">
                     <ion-icon *ngIf="!toRight" class="icon-left" name="arrow-back"></ion-icon>
                     <ion-icon *ngIf="toRight" class="icon-right" name="arrow-forward"></ion-icon>
-                    <div  (scroll)="dragTo($event)" class="news-content parent">
+                    <div #newContentParent (scroll)="dragTo($event)" class="news-content parent">
                         <div #tabsParent class="tabs-parent parent">
                             <div #tabsChildren *ngFor="let item of tabsList;" (click)="changeParent(item)"
                                  class="tabs-children">

src/pages/tabs/discover/discover.scss

@@ -196,6 +196,10 @@ page-discover {
     .tabs-parent {
       margin-bottom: 0px;
       background-color: #ffffff;
+      transition: all 500ms;
+      .tabs-children{
+        width: 90px;
+      }
     }
 
     .parent.tabs-parent {

src/pages/tabs/discover/discover.ts

@@ -9,6 +9,7 @@ import {NoticePage} from "../notice/notice";
 import {AppGlobal} from "../../../service/http.service";
 import {CommonService} from "../../../provide/common.service";
 import {SwiperComponent} from "../../../components/swiper/swiper";
+import {interval} from "rxjs/observable/interval";
 
 declare let Swiper: any;
 
@@ -26,6 +27,7 @@ export class DiscoverPage {
     @ViewChild('tabsChildren') tabsChildren: ElementRef;
     @ViewChild('tabSpan') tabSpan: ElementRef;
     @ViewChild('newsContent') newsContent: ElementRef;
+    @ViewChild('newContentParent') newContentParent: ElementRef;
     @ViewChild('scrollTab') scrollTab: ElementRef;
     @ViewChild(Content) content: Content;
 
@@ -226,6 +228,9 @@ export class DiscoverPage {
         }
     ];
 
+    itemWidth;
+    spanWidth;
+
     constructor(public navCtrl: NavController, public navParams: NavParams,
                 public commonSer: CommonService, public renderer: Renderer2,
                 public zone: NgZone,
@@ -239,6 +244,8 @@ export class DiscoverPage {
     }
 
     ionViewDidLoad() {
+        this.itemWidth = window.screen.width / 4;
+        this.spanWidth = this.tabSpan.nativeElement.offsetWidth;   //文字宽度
         this.initSwiper();
         this.getBanner();
         this.slideList.length = 7;
@@ -263,6 +270,7 @@ export class DiscoverPage {
         }
     }
 
+    //文章分类固定
     scrollHeight() {
         const height = this.topHeight.nativeElement.offsetHeight;
         this.content.ionScroll.subscribe(($event) => {
@@ -290,6 +298,18 @@ export class DiscoverPage {
                 slideChangeTransitionEnd: function () {
                     that.swiper.update();
                     that.changeParent(that.tabsList[this.activeIndex]);
+                    const distancs = this.activeIndex * that.itemWidth/2;   //滑动的长度
+                    let scrollInter = window.setInterval(() => {
+                        if (distancs == that.newContentParent.nativeElement.scrollLeft) {
+                            window.clearInterval(scrollInter);
+                        } else if (distancs > that.newContentParent.nativeElement.scrollLeft) {
+                            that.newContentParent.nativeElement.scrollLeft++;
+                        } else if (distancs < that.newContentParent.nativeElement.scrollLeft) {
+                            that.newContentParent.nativeElement.scrollLeft--;
+                        } else {
+                            window.clearInterval(scrollInter);
+                        }
+                    }, 10)
                 }
             }
         });
@@ -329,6 +349,7 @@ export class DiscoverPage {
         });
     }
 
+
     //前往主题教育
     goEdu() {
         this.swiper.slideTo(1, 500);  //前往主题教育
@@ -379,11 +400,9 @@ export class DiscoverPage {
         this.resourceType = item.name == "知识拓展" ? 3 : 1;
         this.isRecent = this.obj.parentName == "最新发布" ? 1 : 0;
         if (this.childrenList.length > 0) this.indexChildren = this.childrenList[0].indexChildren;
-        let itemWidth = window.screen.width / 4;
-        let spanWidth = this.tabSpan.nativeElement.offsetWidth;   //文字宽度
         this.tips.nativeElement.style.width = this.tabSpan.nativeElement.offsetWidth + 'px';
         // 自身div的一半 - 滑块的一半
-        this.tips.nativeElement.style.left = itemWidth * (this.indexParent) + (itemWidth - spanWidth) / 2 + 'px';
+        this.tips.nativeElement.style.left = this.itemWidth * (this.indexParent) + (this.itemWidth - this.spanWidth) / 2 + 'px';
         const data = {
             pageSize: 1,
             pageCount: this.pageCount,
@@ -462,7 +481,7 @@ export class DiscoverPage {
     }
 
     getMore(res) {
-        const totalNum:number = res.data.total;
+        const totalNum: number = res.data.total;
         if (totalNum < this.pageCount) return false;
         this.pageNum++;
         const data = {