分离文章列表

src/components/components.module.ts

 import { NgModule } from '@angular/core';
 import { SlideComponent } from './slide/slide';
 import {IonicPageModule} from "ionic-angular";
+import { SlideListComponent } from './slide-list/slide-list';
 @NgModule({
 	declarations: [SlideComponent,
+    SlideListComponent,
 
     ],
 	imports: [
 		IonicPageModule
 	],
 	exports: [SlideComponent,
+    SlideListComponent,
 
     ],
 	providers:[

src/components/slide-list/slide-list.html

+<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 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>
+
+<ion-slides (ionSlideDidChange)="slideChange($event)">
+  <ion-slide *ngFor="let item of slideList">
+    <div class="main-news">
+      <ng-container *ngFor="let new of item;">
+        <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-slide>
+</ion-slides>

src/components/slide-list/slide-list.scss

+slide-list {
+
+}

src/components/slide-list/slide-list.ts

+import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
+import {Slides} from "ionic-angular";
+import {TabsService} from "../../pages/tabs/tabs.service";
+import {AppGlobal} from "../../service/http.service";
+
+@Component({
+  selector: 'slide-list',
+  templateUrl: 'slide-list.html'
+})
+export class SlideListComponent implements AfterViewInit{
+  @ViewChild(Slides) slides:Slides;
+  @ViewChild('tabSpan') tabSpan:ElementRef;
+  @ViewChild('tips') tips:ElementRef;
+  @ViewChild('tips1') tips1:ElementRef;
+
+  isScroll = false;
+  //所属板块类型:
+  //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;
+  slideList = [];
+  picture: string = AppGlobal.domain + '/wisdomgroup';
+
+
+
+  constructor(private tabsSer:TabsService) {
+    this.slideList.length = 4;
+    console.log('Hello SlideListComponent Component');
+  }
+
+  ngAfterViewInit(): void {
+    this.change(this.tabsList[0]);
+  }
+
+  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,
+      pageCount: 100,
+      obj: {
+        'plateType': item.type,
+        'resourceType': 1
+      }
+    }
+    this.tabsSer.stuffPage(data).subscribe(
+        (res) => {
+          let arr =  res.data;
+          arr.forEach(e => {
+            if (e.attachments.length > 0) {
+              e.imgUrl = e.attachments[0].path;
+            }
+          })
+          this.slides.slideTo(index,500);
+          this.slideList[index] = arr;
+        }
+    )
+  }
+
+  slideChange(e){
+    const index = this.slides.getActiveIndex();
+    // console.log(this.tabsList[index]);
+    // this.changeParent(this.tabsList[index])
+  }
+
+  //
+  goToDetail(item){}
+
+}

src/components/slide/slide.html

-<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">
-      <span #tabSpan [style.color]="index == i ? '#e12724':''">{{item.name}}</span>
-    </div>
-    <span #tips id="tips"></span>
-  </div>
-</div>
-<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)">
-        <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 class="slides-content">
+  <ion-slides (ionSlideDidChange)="slideChange($event)" #slides *ngIf="slidersItems.length>0" pager
+              loop="true"
+              autoplay="2000" speed="1500">
+    <ion-slide *ngFor="let item of slidersItems;">
+      <img src="{{picture+item.imgUrl}}" class="slide-image" (click)="goToDetail(item)">
+    </ion-slide>
+  </ion-slides>
 </div>
+<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>
\ No newline at end of file

src/components/slide/slide.scss

 slide {
+  $slide-height:200px;
   .news-content{
     margin-top: 1.2rem;
   }
+  .slides-content{
+    height: $slide-height;
+    ion-slide{
+      width: 100%;
+      height: $slide-height;
+    }
+    ion-slides {
+      width: 100%;
+      height: $slide-height;
+    }
+
+    .slide-image {
+      width: 100%;
+      height: $slide-height;
+    }
+
+    .swiper-container {
+      height: $slide-height;
+      width: 100%;
+      overflow-y: auto;
+    }
+  }
 
   //新闻区
   .main-news {

src/components/slide/slide.ts

 import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import {TabsService} from "../../pages/tabs/tabs.service";
 import {AppGlobal} from "../../service/http.service";
+import {Slides} from "ionic-angular";
 // import {StuffDetailPage} from "../../pages/home-pages/stuff-detail/stuff-detail";
 // import {NavController} from "ionic-angular";
 
@@ -9,21 +10,11 @@ import {AppGlobal} from "../../service/http.service";
   templateUrl: 'slide.html'
 })
 export class SlideComponent implements AfterViewInit{
-  @ViewChild('tips') tips: ElementRef;
-  @ViewChild('tabSpan') tabSpan: ElementRef;
-  @ViewChild('headerTag') headerTag: ElementRef;
-  @ViewChild('scrollableTag') scrollableTag: ElementRef;
+  @ViewChild(Slides) slides:Slides;
 
-  text: string;
-  index = 0;
-  newList = [];
   picture: string = AppGlobal.domain + '/wisdomgroup';
-  tabsList = [
-    {name: "系列讲话", type: 2, index: 0},
-    {name: "党章党规", type: 1, index: 1},
-    {name: "中央精神", type: 3, index: 2},
-    {name: "本市部署", type: 4, index: 3}
-  ];
+  slideTitle;
+  slidersItems = [];
 
   constructor(private tabsSer:TabsService,
               // private navCtrl:NavController
@@ -31,34 +22,24 @@ export class SlideComponent implements AfterViewInit{
   }
 
   ngAfterViewInit(){
-      console.log(this.headerTag);
-      let offset = this.headerTag.nativeElement.offsetHeight;
-      (<HTMLDivElement>this.scrollableTag.nativeElement).style.marginTop = offset + 'px';
-    this.change(this.tabsList[0]);
+      this.getBanner();
   }
 
-  //所属板块类型(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;
+  //获取轮播图
+  getBanner() {
     const data = {
-      pageSize: 1,
-      pageCount: 100,
       obj: {
-        'plateType': item.type,
-        'resourceType': 1
+        resourceType: 2,
+        isRecommend: 1,
       }
     }
     this.tabsSer.stuffPage(data).subscribe(
         (res) => {
-          this.newList = res.data;
-          this.newList.forEach(e => {
+          this.slidersItems = res.data;
+          this.slidersItems.forEach(e => {
+            if (e.title.length > 16) {
+              e.title = e.title.substr(0, 14) + '...';
+            }
             if (e.attachments.length > 0) {
               e.imgUrl = e.attachments[0].path;
             }
@@ -67,17 +48,17 @@ export class SlideComponent implements AfterViewInit{
     )
   }
 
-  //
-  setTop(height){
-      console.log(this.headerTag);
-      // this.headerTag.nativeElement.style.top = height +'px';
+  //轮播图变动
+  slideChange(e) {
+    let index = this.slides.getActiveIndex();
+    if (index == this.slidersItems.length + 1) index = 1
+    this.slideTitle = this.slidersItems[index - 1].title;
   }
 
-  // //查看文章详情
-  // goToDetail(item) {
-  //   this.navCtrl.push(StuffDetailPage, {
-  //     id: item.id
-  //   })
-  // }
-
+  //查看文章详情
+  goToDetail(item) {
+    // this.navCtrl.push(StuffDetailPage, {
+    //   id: item.id
+    // })
+  }
 }

src/pages/tabs/discover/discover.ts

@@ -144,7 +144,7 @@ export class DiscoverPage {
     noReadNum;
     picture: string = AppGlobal.domain + '/wisdomgroup';
 
-   slideList = [];
+    slideList = [];
 
     constructor(public navCtrl: NavController, public navParams: NavParams,
                 public commonSer:CommonService,

src/pages/tabs/home/home.html

@@ -22,7 +22,13 @@
         </ion-buttons>
     </ion-navbar>
 </ion-header>
-<ion-content #content>
+<ion-content>
+    <ion-refresher (ionRefresh)="doRefresh($event)">
+        <ion-refresher-content pullingText="下拉刷新"
+                               pullingIcon="arrow-dropdown"
+                               refreshingSpinner="bubbles">
+        </ion-refresher-content>
+    </ion-refresher>
     <div #topHeight>
         <div #homeMiddleTips class="home-middle-tips">
             <ion-row>
@@ -39,74 +45,13 @@
                 </ion-col>
             </ion-row>
         </div>
-        <div style="height: 250px">
-            <ion-slides (ionSlideDidChange)="slideChange($event)" #slides *ngIf="slidersItems.length>0" pager
-                        loop="true"
-                        autoplay="2000" speed="1500">
-                <ion-slide style="height:250px;width: 100%;" *ngFor="let item of slidersItems;">
-                    <img src="{{picture+item.imgUrl}}" class="slide-image" (click)="goToDetail(item)">
-                </ion-slide>
-            </ion-slides>
-        </div>
-        <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 [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 class="tips"></span>
-        </div>
+        <slide></slide>
     </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">
-        <ion-refresher (ionRefresh)="doRefresh($event)">
-            <ion-refresher-content pullingText="下拉刷新"
-            pullingIcon="arrow-dropdown"
-            refreshingSpinner="bubbles">
-            </ion-refresher-content>
-        </ion-refresher>
-        <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>
-        <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
-            <ion-infinite-scroll-content></ion-infinite-scroll-content>
-        </ion-infinite-scroll>
-    </div>
+    <slide-list></slide-list>
+<!--    <ion-infinite-scroll (ionInfinite)="doInfinite($event)">-->
+<!--        <ion-infinite-scroll-content></ion-infinite-scroll-content>-->
+<!--    </ion-infinite-scroll>-->
 </ion-content>
 <!--政治生日-->
 <div *ngIf="isBir" class="signMask">

src/pages/tabs/home/home.scss

 page-home {
-  ion-slides {
-    width: 100%;
-    height: 250px;
-  }
 
-  .slide-image {
-    width: 100%;
-    height: 250px;
-  }
-
-  .swiper-container {
-    height: 250px;
-    width: 100%;
-    overflow-y: auto;
-  }
 
   .slides-title {
     color: #333;
@@ -98,7 +84,7 @@ page-home {
     transition: height 500ms;
 
     ion-row {
-      padding: .5rem 0;
+      padding:0;
       -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
       border-radius: 5px;
@@ -203,5 +189,13 @@ page-home {
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
+  .swiper-slide{
+    align-items: baseline;
+    font-size: 1.4rem;
+  }
+  .slide-zoom{
+    text-align: left;
+  }
 }
 

src/pages/tabs/home/home.ts

@@ -32,7 +32,6 @@ export class HomePage {
     @ViewChild('homeMiddleTips') homeMiddleTips: ElementRef;
 
     picture: string = AppGlobal.domain + '/wisdomgroup';
-    slidersItems = [];
     //所属板块类型:
     //1党章党规,2系列讲话,3中央精神,4本市部署,5通知公告,6党建动态,7工作提示,8党务参考
     //9廉政格言,10纪检提示,11风险排查,12警示教育,13支部活动,14党建联建,15结对帮扶
@@ -58,7 +57,7 @@ export class HomePage {
     signText;   //签到倒计时
     partyObj;  //政治生日
 
-    slideTitle;
+
 
     constructor(public navCtrl: NavController, public tts: TextToSpeech, public datePipe: DatePipe,
                 public commonSer: CommonService, public emitSer: EmitService,
@@ -82,8 +81,7 @@ export class HomePage {
     }
 
     ionViewDidLoad() {
-        this.change(this.tabsList[0]);
-        this.getBanner();
+        // this.change(this.tabsList[0]);
         this.getInfo();
         this.scrollHeight();
     }
@@ -104,35 +102,6 @@ export class HomePage {
 
 
 
-    //获取轮播图
-    getBanner() {
-        const data = {
-            obj: {
-                resourceType: 2,
-                isRecommend: 1,
-            }
-        }
-        this.tabsSer.stuffPage(data).subscribe(
-            (res) => {
-                this.slidersItems = res.data;
-                this.slidersItems.forEach(e => {
-                    if (e.title.length > 16) {
-                        e.title = e.title.substr(0, 14) + '...';
-                    }
-                    if (e.attachments.length > 0) {
-                        e.imgUrl = e.attachments[0].path;
-                    }
-                })
-            }
-        )
-    }
-
-    //slideChange
-    slideChange(e) {
-        let index = this.slides.getActiveIndex();
-        if (index == this.slidersItems.length + 1) index = 1
-        this.slideTitle = this.slidersItems[index - 1].title;
-    }
 
     //获取党员生日
     getInfo() {
@@ -161,8 +130,8 @@ export class HomePage {
         localStorage.setItem('partyBir',nowDay);
 
         this.isBir = false;
-        this.homeMiddleTips.nativeElement.style.height = "80px";
-        this.homeMiddleTips.nativeElement.style.padding = "1rem";
+        this.homeMiddleTips.nativeElement.style.height = "60px";
+        this.homeMiddleTips.nativeElement.style.padding = ".5rem";
         let child_div = this.verticaLamp.nativeElement.children;
         const scrollWidth = this.verticaLamp.nativeElement.offsetWidth;
         const textWidth = child_div[0].offsetWidth;