轮播图

config.xml

 <?xml version='1.0' encoding='utf-8'?>
-<widget id="io.ionic.partyCloud.starter.test" version="0.2.4" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget id="io.ionic.partyCloud.starter.test" version="0.2.8" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>部机关党建云(测试)</name>
     <description>An awesome Ionic/Cordova app.</description>
     <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>

src/components/slide/slide.html

 <div class="slides-content">
-    <ion-slides (ionSlideDidChange)="slideChange($event)" *ngIf="slidersItems.length>0"
-                loop="true" autoplay="2000" speed="1500">
+    <ion-slides (ionSlideDidChange)="slideChange($event)" *ngIf="slidersItems.length>0" (ionSlideTap)="goToDetail()" loop="true" autoplay="2000" speed="1500">
         <ion-slide *ngFor="let item of slidersItems;">
-            <img src="{{picture+item.imgUrl}}" class="slide-image" (click)="goToDetail(item)">
+            <img src="{{picture+item.imgUrl}}" class="slide-image" >
         </ion-slide>
     </ion-slides>
 </div>

src/components/slide/slide.scss

@@ -8,6 +8,7 @@ slide {
     ion-slide{
       width: 100%;
       height: $slide-height;
+      background-color: #e42417;
     }
     ion-slides {
       width: 100%;
@@ -15,10 +16,16 @@ slide {
     }
 
     .slide-image {
-      width: 100%;
-      height: $slide-height;
+      //width: 100%;
+      //height: $slide-height;
+      vertical-align: middle;
+      max-height: 220px;
+    }
+    .slide-zoom{
+      text-align: center;
+      line-height: $slide-height;
+      max-height: 100%;
     }
-
     .swiper-container {
       height: $slide-height;
       width: 100%;

src/components/slide/slide.ts

@@ -55,15 +55,14 @@ export class SlideComponent implements AfterViewInit{
   //轮播图变动
   slideChange(e) {
     this.slideIndex = this.slides.realIndex +1;
-    let index = this.slides.getActiveIndex();
-    if (index == this.slidersItems.length + 1) index = 1
-    this.slideTitle = this.slidersItems[index - 1].title;
+    this.slideTitle = this.slidersItems[this.slideIndex -1].title;
   }
 
   //查看文章详情
-  goToDetail(item) {
+  goToDetail() {
+    const index = this.slides.realIndex;
     this.nav.push(StuffDetailPage, {
-      id: item.id
+      id: this.slidersItems[index].id
     })
   }
 }

src/pages/tabs/discover/discover.html

@@ -107,9 +107,10 @@
     </ion-slide>
   </ion-slides>
 
-  <ion-infinite-scroll #infiniteScrollContent (ionInfinite)="doInfinite($event)">
-    <ion-infinite-scroll-content
-            loadingSpinner="bubbles" threshold="10%"
-            loadingText="加载更多..."></ion-infinite-scroll-content>
-  </ion-infinite-scroll>
+<!--  <ion-infinite-scroll #infiniteScrollContent (ionInfinite)="doInfinite($event)">-->
+<!--    <ion-infinite-scroll-content-->
+<!--            loadingSpinner="bubbles" threshold="10%"-->
+<!--            loadingText="加载更多..."></ion-infinite-scroll-content>-->
+<!--  </ion-infinite-scroll>-->
+
 </ion-content>

src/pages/tabs/discover/discover.scss

@@ -14,6 +14,9 @@ page-discover {
     border-radius: 0px;
   }
 
+  #tips{
+    bottom: 5px;
+  }
   .search-button {
     position: relative;
 

src/pages/tabs/home/home.html

@@ -105,11 +105,11 @@
         </ion-slide>
     </ion-slides>
 
-    <ion-infinite-scroll  #infiniteScrollContent (ionInfinite)="doInfinite($event)">
-        <ion-infinite-scroll-content
-                                     loadingSpinner="bubbles"
-                                     loadingText="加载更多..."></ion-infinite-scroll-content>
-    </ion-infinite-scroll>
+<!--    <ion-infinite-scroll  #infiniteScrollContent (ionInfinite)="doInfinite($event)">-->
+<!--        <ion-infinite-scroll-content-->
+<!--                                     loadingSpinner="bubbles"-->
+<!--                                     loadingText="加载更多..."></ion-infinite-scroll-content>-->
+<!--    </ion-infinite-scroll>-->
 </ion-content>
 <!--政治生日-->
 <div *ngIf="isBir" class="signMask" (click)="close($event)">

src/pages/tabs/home/home.ts

@@ -13,6 +13,7 @@ import {StuffDetailPage} from "../../home-pages/stuff-detail/stuff-detail";
 import {EmitService} from "../../../provide/emit.service";
 import {DatePipe} from "@angular/common";
 import {SlideListComponent} from "../../../components/slide-list/slide-list";
+import {SlideComponent} from "../../../components/slide/slide";
 
 @IonicPage()
 @Component({
@@ -72,18 +73,15 @@ export class HomePage {
     spanWidth;   //文字宽度
 
 
+    pageSize = 1;
+    pageCount = 100;
     //分页
-    total = {    //总页数
-        one:Number,
-        two:Number,
-        three:Number,
-        four:Number,
-    };
+    totalNum;
 
     constructor(public navCtrl: NavController, public tts: TextToSpeech, public datePipe: DatePipe,
                 public commonSer: CommonService, public emitSer: EmitService,
                 public zone: NgZone, public slideListCom: SlideListComponent,
-                public renderer:Renderer2,
+                public renderer:Renderer2,public slideCom:SlideComponent,
                 public appService: AppService, public http: Http, public storage: Storage,
                 public badge: Badge, public tabsSer: TabsService) {
         // 接收发射过来的数据
@@ -96,6 +94,7 @@ export class HomePage {
     }
 
     ionViewDidEnter() {
+        this.slideCom.getBanner();
         this.tabsSer.signNow().subscribe(
             (res) => {
                 this.signObj = res.data;
@@ -115,7 +114,7 @@ export class HomePage {
 
 
     scrollHeight() {
-        const height = this.topHeight.nativeElement.offsetHeight + 54;
+        const height = this.topHeight.nativeElement.offsetHeight + 48;
         this.content.ionScroll.subscribe(($event) => {
             this.zone.run(() => {
                 if (this.content.scrollTop > height) {
@@ -128,6 +127,7 @@ export class HomePage {
     }
 
     change(item) {
+        this.pageSize = 1;
         const index = item.index;
         // 自身div的一半 - 滑块的一半
         this.tips.nativeElement.style.left = this.itemWidth * (index) + (this.itemWidth - this.spanWidth) / 2 + 'px';
@@ -135,8 +135,8 @@ export class HomePage {
         this.index = index;
         this.plateType = item.type;
         const data = {
-            pageSize: 1,
-            pageCount: 100,
+            pageSize: this.pageSize,
+            pageCount: this.pageCount,
             obj: {
                 'plateType': this.plateType,
                 'resourceType': 1
@@ -145,6 +145,7 @@ export class HomePage {
         this.tabsSer.stuffPage(data).subscribe(
             (res) => {
                 let arr = res.data.list;
+                this.totalNum = res.data.total;
                 if(arr.length > 0){
                     arr.forEach(e => {
                         if (e.attachments.length > 0) {
@@ -167,7 +168,6 @@ export class HomePage {
         if (index == this.tabsList.length) index = 0;
         if (index == this.tabsList.length + 1) index = 1;
         this.change(this.tabsList[index])
-        console.log(index);
     }
 
 
@@ -264,18 +264,47 @@ export class HomePage {
 
     //上拉加载
     doInfinite(e) {
+        if(this.totalNum == this.slideList[this.index].length){
+            e.complete();
+            this.commonSer.toastTime('没有更多数据了',1000);
+            return false
+        }
+        this.pageSize ++;
+        const data = {
+            pageSize: this.pageSize,
+            pageCount: this.pageCount,
+            obj: {
+                'plateType': this.plateType,
+                'resourceType': 1
+            }
+        }
+        this.tabsSer.stuffPage(data).subscribe(
+            (res) => {
+                let arr = res.data.list;
+                if(arr.length > 0){
+                    arr.forEach(e => {
+                        if (e.attachments.length > 0) {
+                            e.imgUrl = e.attachments[0].path;
+                        }
+                        this.slideList[this.index].push(e);
+                    });
+                }
+
                 this.renderer.setStyle(this.infiniteScrollContent.nativeElement,'height','84px');
                 setTimeout(()=>{
                     e.complete();
                     this.renderer.setStyle(this.infiniteScrollContent.nativeElement,'height','0px');
-        },1000)
+                },800)
+            }
+        )
+
     }
 
     //下拉刷新
     doRefresh(e) {
         const data = {
             pageSize: 1,
-            pageCount: 100,
+            pageCount: this.pageCount,
             obj: {
                 'plateType': this.plateType,
                 'resourceType': 1
@@ -293,9 +322,9 @@ export class HomePage {
                 }
                 this.slideList[this.index] = arr;
                 setTimeout(()=>{
-                    this.commonSer.toastTime('刷新成功!', 800)
+                    this.commonSer.toastTime('刷新成功!', 800);
                     e.complete();
-                },1000)
+                },800)
             }
         )
     }