discover 左滑右滑

src/pages/tabs/discover/discover.html

@@ -47,53 +47,58 @@
                            refreshingSpinner="bubbles">
     </ion-refresher-content>
   </ion-refresher>
-  <div class="search-content">
-    <ng-container *ngFor="let item of newList">
-      <div class="search-item" (click)="goToDetail(item)">
-        <p class="item-info">
-          <span class="item-source">{{item.source}}</span>
-          <span>{{item.publishTime | date:'yyyy-MM-dd'}}</span>
-        </p>
-        <div class="item-news">
-          <ion-row class="news-item">
-            <ng-container *ngIf="item.imgUrl">
-              <ion-col col-8 class="news-left">
-                <p class="news-title">{{item.title}}</p>
-                <p class="news-end">
-                  <ion-icon style="font-size: 2.5rem;vertical-align: sub" name="eye"></ion-icon>
-                  <span>{{item.browseCount}}</span>
-                  <ion-icon name="chatboxes"></ion-icon>
-                  <span>{{item.commentCount}}</span>
-                  <ion-icon name="thumbs-up"></ion-icon>
-                  <span>{{item.likeCount}}</span>
-                  <ion-icon name="heart"></ion-icon>
-                  <span>{{item.collectionCount}}</span>
-                </p>
-              </ion-col>
-              <ion-col col-4 class="news-right">
-                <img src="{{picture+item.imgUrl}}">
-              </ion-col>
-            </ng-container>
-            <ng-container *ngIf="!item.imgUrl">
-              <ion-col col-12 class="news-left">
-                <p class="news-title">{{item.title}}</p>
-                <p class="news-end">
-                  <ion-icon style="font-size: 2.5rem;vertical-align: sub" name="eye"></ion-icon>
-                  <span>{{item.browseCount}}</span>
-                  <ion-icon name="chatboxes"></ion-icon>
-                  <span>{{item.commentCount}}</span>
-                  <ion-icon name="thumbs-up"></ion-icon>
-                  <span>{{item.likeCount}}</span>
-                  <ion-icon name="heart"></ion-icon>
-                  <span>{{item.collectionCount}}</span>
-                </p>
-              </ion-col>
-            </ng-container>
-          </ion-row>
-        </div>
+
+  <ion-slides (ionSlideDidChange)="slideChange($event)">
+    <ion-slide *ngFor="let new of slideList">
+      <div class="search-content">
+        <ng-container *ngFor="let item of new">
+          <div class="search-item" (click)="goToDetail(item)">
+            <p class="item-info">
+              <span class="item-source">{{item.source}}</span>
+              <span>{{item.publishTime | date:'yyyy-MM-dd'}}</span>
+            </p>
+            <div class="item-news">
+              <ion-row class="news-item">
+                <ng-container *ngIf="item.imgUrl">
+                  <ion-col col-8 class="news-left">
+                    <p class="news-title">{{item.title}}</p>
+                    <p class="news-end">
+                      <ion-icon style="font-size: 2.5rem;vertical-align: sub" name="eye"></ion-icon>
+                      <span>{{item.browseCount}}</span>
+                      <ion-icon name="chatboxes"></ion-icon>
+                      <span>{{item.commentCount}}</span>
+                      <ion-icon name="thumbs-up"></ion-icon>
+                      <span>{{item.likeCount}}</span>
+                      <ion-icon name="heart"></ion-icon>
+                      <span>{{item.collectionCount}}</span>
+                    </p>
+                  </ion-col>
+                  <ion-col col-4 class="news-right">
+                    <img src="{{picture+item.imgUrl}}">
+                  </ion-col>
+                </ng-container>
+                <ng-container *ngIf="!item.imgUrl">
+                  <ion-col col-12 class="news-left">
+                    <p class="news-title">{{item.title}}</p>
+                    <p class="news-end">
+                      <ion-icon style="font-size: 2.5rem;vertical-align: sub" name="eye"></ion-icon>
+                      <span>{{item.browseCount}}</span>
+                      <ion-icon name="chatboxes"></ion-icon>
+                      <span>{{item.commentCount}}</span>
+                      <ion-icon name="thumbs-up"></ion-icon>
+                      <span>{{item.likeCount}}</span>
+                      <ion-icon name="heart"></ion-icon>
+                      <span>{{item.collectionCount}}</span>
+                    </p>
+                  </ion-col>
+                </ng-container>
+              </ion-row>
+            </div>
+          </div>
+        </ng-container>
       </div>
-    </ng-container>
-  </div>
+    </ion-slide>
+  </ion-slides>
 
   <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
     <ion-infinite-scroll-content></ion-infinite-scroll-content>

src/pages/tabs/discover/discover.scss

@@ -138,4 +138,13 @@ page-discover {
       background-color: #ffffff;
     }
   }
+
+
+  .swiper-slide{
+    align-items: baseline;
+    font-size: 1.4rem;
+  }
+  .slide-zoom{
+    text-align: left;
+  }
 }

src/pages/tabs/discover/discover.ts

 import {Component, ElementRef, ViewChild} from '@angular/core';
-import {IonicPage, NavController, NavParams} from 'ionic-angular';
+import {IonicPage, NavController, NavParams, Slide, Slides} from 'ionic-angular';
 import {SearchNewPage} from "../../home-pages/search-new/search-new";
 import {TabsService} from "../tabs.service";
 import {StuffDetailPage} from "../../home-pages/stuff-detail/stuff-detail";
@@ -16,6 +16,7 @@ import {CommonService} from "../../../provide/common.service";
     templateUrl: 'discover.html',
 })
 export class DiscoverPage {
+    @ViewChild(Slides) slides:Slides;
     @ViewChild('tips') tips: ElementRef;
     @ViewChild('tabsParent') tabsParent: ElementRef;
     @ViewChild('tabsChildren') tabsChildren: ElementRef;
@@ -131,7 +132,7 @@ export class DiscoverPage {
                     "indexChildren": '34'
                 }]
         },
-        {"name": "知识拓展", "type": -1, "indexParent": 4, "children": []}
+        // {"name": "知识拓展", "type": -1, "indexParent": 4, "children": []}
     ];
     childrenList = [];
     plateType;   //分类
@@ -139,9 +140,12 @@ export class DiscoverPage {
     indexParent = 1;
     indexChildren = 0;
     newList;   //新闻列表
+
     noReadNum;
     picture: string = AppGlobal.domain + '/wisdomgroup';
 
+   slideList = [];
+
     constructor(public navCtrl: NavController, public navParams: NavParams,
                 public commonSer:CommonService,
                 public tabsSer: TabsService, public emitSer: EmitService) {
@@ -154,6 +158,7 @@ export class DiscoverPage {
     }
 
     ionViewDidEnter() {
+        this.slideList.length = 5;
         this.changeParent(this.tabsList[1]);
     }
 
@@ -185,7 +190,9 @@ export class DiscoverPage {
                     if (e.attachments.length > 0) {
                         e.imgUrl = e.attachments[0].path;
                     }
-                })
+                });
+                this.slides.slideTo(index,500);
+                this.slideList[index] = this.newList;
             }
         )
     }
@@ -263,4 +270,9 @@ export class DiscoverPage {
         e.complete();
     }
 
+    slideChange(e){
+       const index = this.slides.getActiveIndex();
+       console.log(this.tabsList[index]);
+       this.changeParent(this.tabsList[index])
+    }
 }

src/pages/tabs/home/home.html

@@ -39,11 +39,11 @@
                 </ion-col>
             </ion-row>
         </div>
-        <div style="height: 200px">
+        <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:200px;width: 100%;" *ngFor="let item of slidersItems;">
+                <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>

src/pages/tabs/home/home.scss

 page-home {
   ion-slides {
     width: 100%;
-    height: 200px;
+    height: 250px;
   }
 
   .slide-image {
     width: 100%;
-    height: 200px;
+    height: 250px;
   }
 
   .swiper-container {
-    height: 200px;
+    height: 250px;
     width: 100%;
     overflow-y: auto;
   }