component组件

src/app/app.scss

@@ -209,7 +209,7 @@ p {
 }
 
 
-#tips,#tips1 {
+#tips,.tips {
   position: absolute;
   bottom: 5px;
   height: 2px;

src/components/slide/slide.scss

@@ -2,9 +2,6 @@ slide {
   .news-content{
     margin-top: 1.2rem;
   }
-  div[ion-fixed] {
-    width: 100%;
-  }
 
   //新闻区
   .main-news {

src/pages/tabs/home/home.html

@@ -31,7 +31,10 @@
                 </ion-col>
                 <ion-col col-10 class="middle-right">
                     <div #verticaLamp id="party-bir">
-                        <div class="vertivalLamp"><span class="main-color">{{partyObj?.name}}</span>同志，欢迎您，今天是<span class="main-color">{{partyObj?.now | date:'yyyy年MM月dd日'}}</span>，是您加入中国共产党的第<span class="main-color">{{partyObj?.partytime}}</span>天，希望您不忘初心，牢记使命，永远奋斗。</div>
+                        <div class="vertivalLamp"><span class="main-color">{{partyObj?.name}}</span>同志，欢迎您，今天是<span
+                                class="main-color">{{partyObj?.now | date:'yyyy年MM月dd日'}}</span>，是您加入中国共产党的第<span
+                                class="main-color">{{partyObj?.partytime}}</span>天，希望您不忘初心，牢记使命，永远奋斗。
+                        </div>
                     </div>
                 </ion-col>
             </ion-row>
@@ -48,14 +51,24 @@
         <p class="slides-title">{{slideTitle}} <span class="main-color" float-end>1<span
                 style="font-size: 1.5rem;font-weight: 400;">/{{slidersItems.length}}</span></span></p>
     </div>
-    <div class="news-content">
+    <div [hidden]="isScroll" class="news-content">
         <div class="tabs-parent">
             <div *ngFor="let item of tabsList;let i = index" (click)="change(item)" class="tabs-children">
                 <span #tabSpan [style.color]="index == i ? '#e12724':''">{{item.name}}</span>
             </div>
-            <span #tips id="tips"></span>
+            <span #tips class="tips"></span>
         </div>
     </div>
+
+    <div [hidden]="!isScroll" ion-fixed class="news-content ion-fixed">
+        <div class="tabs-parent">
+            <div *ngFor="let item of tabsList;let i = index" (click)="change(item)" class="tabs-children">
+                <span #tabSpan1 [style.color]="index == i ? '#e12724':''">{{item.name}}</span>
+            </div>
+            <span #tips1 class="tips"></span>
+        </div>
+    </div>
+
     <div class="main-news">
         <ng-container *ngFor="let new of newList;">
             <ng-container *ngIf="new.imgUrl">
@@ -91,7 +104,9 @@
     <div class="mask-content-bir">
         <p class="title">政治生日</p>
         <div class="record-content">
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="main-color">{{partyObj?.name}}</span>同志，欢迎您，今天是<span class="main-color">{{partyObj?.now | date:'yyyy年MM月dd日'}}</span>，是您加入中国共产党的第<span class="main-color">{{partyObj?.partytime}}</span>天，希望您不忘初心，牢记使命，永远奋斗。
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="main-color">{{partyObj?.name}}</span>同志，欢迎您，今天是<span
+                class="main-color">{{partyObj?.now | date:'yyyy年MM月dd日'}}</span>，是您加入中国共产党的第<span
+                class="main-color">{{partyObj?.partytime}}</span>天，希望您不忘初心，牢记使命，永远奋斗。
         </div>
         <div class="mask-button">
             <button class="submit-btn submit" (click)="start()">确定</button>

src/pages/tabs/home/home.scss

@@ -134,6 +134,9 @@ page-home {
   .news-content{
     margin-top: 1.2rem;
   }
+  .news-content.ion-fixed{
+    margin: 0;
+  }
   //新闻区
   .main-news {
     padding: 0 1rem;

src/pages/tabs/home/home.ts

-import {Component, ElementRef, ViewChild, NgZone} from '@angular/core';
+import {Component, ElementRef, ViewChild, NgZone, Renderer2} from '@angular/core';
 import {NavController, IonicPage, Slides, Content} from 'ionic-angular';
 import {Http, Response} from '@angular/http';
 import {AppService, AppGlobal} from '../../../service/http.service';
@@ -23,9 +23,12 @@ export class HomePage {
     @ViewChild(Slides) slides: Slides;
     @ViewChild(Content) content: Content;
     @ViewChild('tips') tips: ElementRef;
+    @ViewChild('tips1') tips1: ElementRef;
     @ViewChild('verticaLamp') verticaLamp: ElementRef;
     @ViewChild('tabSpan') tabSpan: ElementRef;
+    @ViewChild('tabSpan1') tabSpan1: ElementRef;
     @ViewChild('topHeight') topHeight: ElementRef;
+    @ViewChild('headerTag') headerTag: ElementRef;
     @ViewChild('homeMiddleTips') homeMiddleTips: ElementRef;
 
     picture: string = AppGlobal.domain + '/wisdomgroup';
@@ -42,6 +45,7 @@ export class HomePage {
     index = 0;
     isSign = false;   //签到弹窗
     isBir = false;  //政治生日弹窗
+    isScroll = false;   //tabs置顶
 
     newList = [];
     noReadNum;
@@ -58,7 +62,7 @@ export class HomePage {
 
     constructor(public navCtrl: NavController, public tts: TextToSpeech, public datePipe: DatePipe,
                 public commonSer: CommonService, public emitSer: EmitService,
-                public ngZone: NgZone,
+                public zone: NgZone,public renderer:Renderer2,
                 public appService: AppService, public http: Http, public storage: Storage,
                 public badge: Badge, public tabsSer: TabsService) {
         // 接收发射过来的数据
@@ -81,7 +85,24 @@ export class HomePage {
         this.change(this.tabsList[0]);
         this.getBanner();
         this.getInfo();
+        this.scrollHeight();
     }
+    scrollHeight(){
+        const height = this.topHeight.nativeElement.offsetHeight + 80;
+        this.content.ionScroll.subscribe(($event)=>{
+            this.zone.run(()=>{
+                // this.headerTag.nativeElement.
+                if(this.content.scrollTop > height){
+                    this.isScroll = true;
+                }else{
+                    this.isScroll = false;
+                }
+                this.content.resize();
+            })
+        })
+    }
+
+
 
     //获取轮播图
     getBanner() {
@@ -140,6 +161,7 @@ export class HomePage {
     start() {
         const nowDay = this.datePipe.transform( new Date(),'yyyy-MM-dd' );
         localStorage.setItem('partyBir',nowDay);
+
         this.isBir = false;
         this.homeMiddleTips.nativeElement.style.height = "80px";
         this.homeMiddleTips.nativeElement.style.padding = "1rem";
@@ -157,15 +179,16 @@ export class HomePage {
         },20)
     }
 
-    //所属板块类型(1党规党章,2系列讲话,3中央精神,4本市部署,5通知公告,6党建动态,7工作提示,
-    //      * 8党务参考,9廉政格言,10纪检提示,11风险排查,12警示教育,13支部活动,14党建联建,15结对帮扶)
+
     change(item) {
         const index = item.index;
         let itemWidth = window.screen.width / 4;
         let spanWidth = this.tabSpan.nativeElement.offsetWidth;   //文字宽度
         this.tips.nativeElement.style.width = this.tabSpan.nativeElement.offsetWidth + 'px';
+        this.tips1.nativeElement.style.width = this.tabSpan.nativeElement.offsetWidth + 'px';
         // 自身div的一半 - 滑块的一半
         this.tips.nativeElement.style.left = itemWidth * (index) + (itemWidth - spanWidth) / 2 + 'px';
+        this.tips1.nativeElement.style.left = itemWidth * (index) + (itemWidth - spanWidth) / 2 + 'px';
         this.index = index;
         const data = {
             pageSize: 1,