component组件

src/components/components.module.ts

@@ -2,10 +2,17 @@ import { NgModule } from '@angular/core';
 import { SlideComponent } from './slide/slide';
 import {IonicPageModule} from "ionic-angular";
 @NgModule({
-	declarations: [SlideComponent],
+	declarations: [SlideComponent,
+
+    ],
 	imports: [
 		IonicPageModule
 	],
-	exports: [SlideComponent]
+	exports: [SlideComponent,
+
+    ],
+	providers:[
+		SlideComponent,
+	]
 })
 export class ComponentsModule {}

src/components/slide/slide.html

-<!-- Generated template for the SlideComponent component -->
-<div class="news-content">
+<div #headerTag class="news-content" ion-fixed>
   <div class="tabs-parent">
-    <div *ngFor="let item of tabsList;let i = index" (click)="change(item)" class="tabs-children">
+    <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>
   </div>
 </div>
-<div class="main-news">
+<div #scrollableTag class="main-news">
   <ng-container *ngFor="let new of newList;">
     <ng-container *ngIf="new.imgUrl">
       <ion-row class="news-item" (click)="goToDetail(new)">

src/components/slide/slide.scss

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

src/components/slide/slide.ts

-import {Component, ElementRef, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import {TabsService} from "../../pages/tabs/tabs.service";
 import {AppGlobal} from "../../service/http.service";
-import {StuffDetailPage} from "../../pages/home-pages/stuff-detail/stuff-detail";
-import {NavController} from "ionic-angular";
+// import {StuffDetailPage} from "../../pages/home-pages/stuff-detail/stuff-detail";
+// import {NavController} from "ionic-angular";
 
 @Component({
   selector: 'slide',
   templateUrl: 'slide.html'
 })
-export class SlideComponent {
+export class SlideComponent implements AfterViewInit{
   @ViewChild('tips') tips: ElementRef;
   @ViewChild('tabSpan') tabSpan: ElementRef;
+  @ViewChild('headerTag') headerTag: ElementRef;
+  @ViewChild('scrollableTag') scrollableTag: ElementRef;
 
   text: string;
   index = 0;
@@ -23,10 +25,15 @@ export class SlideComponent {
     {name: "本市部署", type: 4, index: 3}
   ];
 
-  constructor(private tabsSer:TabsService,private navCtrl:NavController) {
+  constructor(private tabsSer:TabsService,
+              // private navCtrl:NavController
+  ) {
   }
 
-  ionViewDidLoad(){
+  ngAfterViewInit(){
+      console.log(this.headerTag);
+      let offset = this.headerTag.nativeElement.offsetHeight;
+      (<HTMLDivElement>this.scrollableTag.nativeElement).style.marginTop = offset + 'px';
     this.change(this.tabsList[0]);
   }
 
@@ -60,11 +67,17 @@ export class SlideComponent {
     )
   }
 
-  //查看文章详情
-  goToDetail(item) {
-    this.navCtrl.push(StuffDetailPage, {
-      id: item.id
-    })
+  //
+  setTop(height){
+      console.log(this.headerTag);
+      // this.headerTag.nativeElement.style.top = height +'px';
   }
 
+  // //查看文章详情
+  // goToDetail(item) {
+  //   this.navCtrl.push(StuffDetailPage, {
+  //     id: item.id
+  //   })
+  // }
+
 }

src/pages/tabs/home/home.html

@@ -48,8 +48,43 @@
         <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>
-    <!--新闻-->
-    <slide></slide>
+    <div 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>
+        </div>
+    </div>
+    <div class="main-news">
+        <ng-container *ngFor="let new of newList;">
+            <ng-container *ngIf="new.imgUrl">
+                <ion-row class="news-item" (click)="goToDetail(new)">
+                    <ion-col col-8 class="news-left">
+                        <p class="news-title">{{new.title}}</p>
+                        <p class="news-end">
+                            <span>{{new.source}}</span>
+                            <span>{{new.publishTime | date:'yyyy-MM-dd'}}</span>
+                        </p>
+                    </ion-col>
+                    <ion-col col-4 class="news-right">
+                        <img src="{{picture+new.imgUrl}}">
+                    </ion-col>
+                </ion-row>
+            </ng-container>
+            <ng-container *ngIf="!new.imgUrl">
+                <ion-row class="news-item" (click)="goToDetail(new)">
+                    <ion-col col-12 class="news-left">
+                        <p class="news-title">{{new.title}}</p>
+                        <p class="news-end">
+                            <span>{{new.source}}</span>
+                            <span>{{new.publishTime | date:'yyyy-MM-dd'}}</span>
+                        </p>
+                    </ion-col>
+                </ion-row>
+            </ng-container>
+        </ng-container>
+    </div>
 </ion-content>
 <!--政治生日-->
 <div *ngIf="isBir" class="signMask">

src/pages/tabs/home/home.scss

@@ -57,7 +57,7 @@ page-home {
 
   .toolbar-signUp {
     .signUp-span {
-     position: relative;
+      position: relative;
     }
 
     img.toolbar-img{
@@ -131,6 +131,51 @@ page-home {
     height: 54px;
   }
 
+  .news-content{
+    margin-top: 1.2rem;
+  }
+  //新闻区
+  .main-news {
+    padding: 0 1rem;
+
+    .news-item {
+      padding: .8rem 0;
+
+      .news-left {
+        display: flex;
+        flex-flow: row wrap;
+        min-height: 100%;
+
+        .news-title {
+          align-self: flex-start;
+          font-weight: bold;
+          width: 100%;
+          margin-bottom: .6rem;
+        }
+
+        .news-end {
+          //align-self: flex-end;
+          color: #999999;
+          span {
+            margin-right: 1rem;
+          }
+        }
+      }
+
+      .news-right {
+        text-align: center;
+        img {
+          border-radius: .5rem;
+          height: 60px;
+        }
+      }
+    }
+
+    .news-item + .news-item {
+      border-top: 1px solid #eeeeee;
+    }
+  }
+
   .mask-button {
     border-top: 1px solid #eeeeee;
     text-align: center;

src/pages/tabs/home/home.ts

@@ -22,17 +22,28 @@ import {DatePipe} from "@angular/common";
 export class HomePage {
     @ViewChild(Slides) slides: Slides;
     @ViewChild(Content) content: Content;
+    @ViewChild('tips') tips: ElementRef;
     @ViewChild('verticaLamp') verticaLamp: ElementRef;
+    @ViewChild('tabSpan') tabSpan: ElementRef;
     @ViewChild('topHeight') topHeight: ElementRef;
     @ViewChild('homeMiddleTips') homeMiddleTips: ElementRef;
 
-    slidersItems = [];
-
     picture: string = AppGlobal.domain + '/wisdomgroup';
-
+    slidersItems = [];
+    //所属板块类型:
+    //1党章党规,2系列讲话,3中央精神,4本市部署,5通知公告,6党建动态,7工作提示,8党务参考
+    //9廉政格言,10纪检提示,11风险排查,12警示教育,13支部活动,14党建联建,15结对帮扶
+    tabsList = [
+        {name: "系列讲话", type: 2, index: 0},
+        {name: "党章党规", type: 1, index: 1},
+        {name: "中央精神", type: 3, index: 2},
+        {name: "本市部署", type: 4, index: 3}
+    ];
+    index = 0;
     isSign = false;   //签到弹窗
     isBir = false;  //政治生日弹窗
 
+    newList = [];
     noReadNum;
 
     signObj = {
@@ -67,6 +78,7 @@ export class HomePage {
     }
 
     ionViewDidLoad() {
+        this.change(this.tabsList[0]);
         this.getBanner();
         this.getInfo();
     }
@@ -123,6 +135,7 @@ export class HomePage {
     }
 
 
+
     //关闭弹窗 开启跑马灯
     start() {
         const nowDay = this.datePipe.transform( new Date(),'yyyy-MM-dd' );
@@ -144,6 +157,36 @@ 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';
+        // 自身div的一半 - 滑块的一半
+        this.tips.nativeElement.style.left = itemWidth * (index) + (itemWidth - spanWidth) / 2 + 'px';
+        this.index = index;
+        const data = {
+            pageSize: 1,
+            pageCount: 100,
+            obj: {
+                'plateType': item.type,
+                'resourceType': 1
+            }
+        }
+        this.tabsSer.stuffPage(data).subscribe(
+            (res) => {
+                this.newList = res.data;
+                this.newList.forEach(e => {
+                    if (e.attachments.length > 0) {
+                        e.imgUrl = e.attachments[0].path;
+                    }
+                })
+            }
+        )
+    }
+
     //签到接口
     signUp() {
         this.tabsSer.sign().subscribe(
@@ -175,7 +218,12 @@ export class HomePage {
         }, 1000)
     }
 
-
+    //查看文章详情
+    goToDetail(item) {
+        this.navCtrl.push(StuffDetailPage, {
+            id: item.id
+        })
+    }
 
     //前往搜索页面
     goToSearch() {