add two platform

angular.json

@@ -9,7 +9,13 @@
       "sourceRoot": "src",
       "projectType": "application",
       "prefix": "app",
-      "schematics": {},
+      "schematics": {
+        "@ionic/angular-toolkit:component": {
+          "styleext": "scss",
+          "inlineStyle": true,
+          "spec": false
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
@@ -185,10 +191,14 @@
   },
   "schematics": {
     "@ionic/angular-toolkit:component": {
-      "styleext": "scss"
+      "styleext": "scss",
+      "inlineStyle": true,
+      "spec": false
     },
     "@ionic/angular-toolkit:page": {
-      "styleext": "scss"
+      "styleext": "scss",
+      "inlineStyle": true,
+      "spec": false
     }
   }
 }

package.json

@@ -34,6 +34,7 @@
     "cordova-plugin-whitelist": "^1.3.3",
     "core-js": "^2.5.4",
     "rxjs": "~6.3.3",
+    "web-animations-js": "^2.3.1",
     "zone.js": "~0.8.29"
   },
   "devDependencies": {

resources/README.md

+These are Cordova resources. You can replace icon.png and splash.png and run
+`ionic cordova resources` to generate custom icons and splash screens for your
+app. See `ionic cordova resources --help` for details.
+
+Cordova reference documentation:
+
+- Icons: https://cordova.apache.org/docs/en/latest/config_ref/images.html
+- Splash Screens: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/

src/app/app.component.spec.ts

-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { TestBed, async } from '@angular/core/testing';
-
-import { Platform } from '@ionic/angular';
-import { SplashScreen } from '@ionic-native/splash-screen/ngx';
-import { StatusBar } from '@ionic-native/status-bar/ngx';
-
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-
-  let statusBarSpy, splashScreenSpy, platformReadySpy, platformSpy;
-
-  beforeEach(async(() => {
-    statusBarSpy = jasmine.createSpyObj('StatusBar', ['styleDefault']);
-    splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']);
-    platformReadySpy = Promise.resolve();
-    platformSpy = jasmine.createSpyObj('Platform', { ready: platformReadySpy });
-
-    TestBed.configureTestingModule({
-      declarations: [AppComponent],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-      providers: [
-        { provide: StatusBar, useValue: statusBarSpy },
-        { provide: SplashScreen, useValue: splashScreenSpy },
-        { provide: Platform, useValue: platformSpy },
-      ],
-    }).compileComponents();
-  }));
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it('should initialize the app', async () => {
-    TestBed.createComponent(AppComponent);
-    expect(platformSpy.ready).toHaveBeenCalled();
-    await platformReadySpy;
-    expect(statusBarSpy.styleDefault).toHaveBeenCalled();
-    expect(splashScreenSpy.hide).toHaveBeenCalled();
-  });
-
-  // TODO: add more tests!
-
-});

src/app/home/home.module.ts

@@ -3,8 +3,12 @@ import { CommonModule } from '@angular/common';
 import { IonicModule } from '@ionic/angular';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-
 import { HomePage } from './home.page';
+import { PageOneComponent } from '../main/page-one/page-one.component';
+import { PageTwoComponent } from '../main/page-two/page-two.component';
+import { PageThreeComponent } from '../main/page-three/page-three.component';
+import { PageFourComponent } from '../main/page-four/page-four.component';
+import { PageDetailComponent } from '../main/page-detail/page-detail.component';
 
 @NgModule({
   imports: [
@@ -18,6 +22,13 @@ import { HomePage } from './home.page';
       }
     ])
   ],
-  declarations: [HomePage]
+  declarations: [
+      HomePage,
+      PageOneComponent,
+      PageTwoComponent,
+      PageThreeComponent,
+      PageFourComponent,
+      PageDetailComponent
+  ]
 })
 export class HomePageModule {}

src/app/home/home.page.html

-<ion-header>
-  <ion-toolbar>
-    <ion-title>
-      Ionic Blank
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content padding>
-  The world is your oyster.
-  <p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
-</ion-content>
+<ion-slides id="slideComponent" style="width: 100%;height: 100%;"
+            mode="ios" [options]="options" (ionSlideDidChange)="slideOnChange()">
+  <ion-slide>
+    <div class="box" style="color: #ffd31a">
+      <ion-slides style="width: 100%;height: 200px;"
+                  mode="ios" [options]="options_2">
+        <ion-slide>
+          <div class="inBox" style="color: #ffd31a"><h1>xxxx</h1></div>
+        </ion-slide>
+        <ion-slide>
+          <div class="inBox" style="color: #f04141"><h1>xxx</h1></div>
+        </ion-slide>
+        <ion-slide>
+          <div class="inBox" style="color: #7e57ff"><h1>xx</h1></div>
+        </ion-slide>
+        <ion-slide>
+          <div class="inBox" style="color: #cccccc"><h1>x</h1></div>
+        </ion-slide>
+      </ion-slides>
+    </div>
+  </ion-slide>
+  <ion-slide>
+    <div class="box" style="color: #f04141"><h1>2222</h1></div>
+  </ion-slide>
+  <ion-slide>
+    <div class="box" style="color: #7e57ff"><h1>3333</h1></div>
+  </ion-slide>
+  <ion-slide>
+    <div class="box" style="color: #cccccc"><h1>4444</h1></div>
+  </ion-slide>
+</ion-slides>
+<ion-row class="bottomPart">
+  <ion-col [ngClass]="{'activeBar': active[0]}" (click)="goActive(0)">首页</ion-col>
+  <ion-col class="padLeft" [ngClass]="{'activeBar': active[1]}" (click)="goActive(1)">第二页</ion-col>
+  <ion-col class="padLeft" [ngClass]="{'activeBar': active[2]}" (click)="goActive(2)">第三页</ion-col>
+  <ion-col class="padLeft" [ngClass]="{'activeBar': active[3]}" (click)="goActive(3)">我的</ion-col>
+</ion-row>

src/app/home/home.page.scss

+.bottomPart {
+  height: 55px;
+  line-height: 35px;
+  text-align: center;
+  border-top: 1px solid #ccc;
+  color: cornflowerblue;
+}
 
+.padLeft {
+  border-left: 1px solid #cccccc;
+}
+
+.activeBar {
+  background-color: #f25454;
+  color: #ffffff;
+}
+
+.inBox {
+
+}
+
+.box {
+  width: 100%;
+  height: 100%;
+}

src/app/home/home.page.spec.ts

-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { HomePage } from './home.page';
-
-describe('HomePage', () => {
-  let component: HomePage;
-  let fixture: ComponentFixture<HomePage>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ HomePage ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    })
-      .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(HomePage);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/home/home.page.ts

-import { Component } from '@angular/core';
+import { Component, ViewChild, OnInit } from '@angular/core';
+import { IonSlides } from '@ionic/angular';
 
 @Component({
   selector: 'app-home',
   templateUrl: 'home.page.html',
   styleUrls: ['home.page.scss'],
 })
-export class HomePage {
+export class HomePage implements OnInit{
+  @ViewChild(IonSlides) slides;
+  options = {
+    speed: 1000,
+    allowTouchMove: false
+  };
+  options_2 = {
+    speed: 1000,
+    allowTouchMove: true
+  };
+  index;
+  active = [true, false, false, false];
+  startX;
+  startY;
+  X;
+  Y;
 
+  ngOnInit() {
+    document.getElementById('slideComponent').addEventListener('touchstart', <TouchEvent>(e) => {
+      e.preventDefault();
+      this.startX = e.touches[0].pageX;
+      this.startY = e.touches[0].pageY;
+    });
+    document.getElementById('slideComponent').addEventListener('touchmove', <TouchEvent>(e) => {
+      e.preventDefault();
+      const moveEndX = e.touches[0].pageX;
+      const moveEndY = e.touches[0].pageY;
+      this.X = moveEndX - this.startX;
+      this.Y = moveEndY - this.startY;
+    });
+    document.getElementById('slideComponent').addEventListener('touchend', <TouchEvent>(e) => {
+      e.preventDefault();
+      if ( this.X > 0 ) {
+        this.slidePrev();
+      } else if ( this.X < 0 ) {
+        this.slideNext();
+      }
+    });
+  }
+
+  slideOnChange() {
+    this.slides.getActiveIndex().then((index) => {
+      this.changeIndex(index);
+    });
+  }
+
+  changeIndex(index) {
+    const active = [false, false, false, false];
+    active[index] = true;
+    this.active = active;
+  }
+
+  goActive(index) {
+    this.changeIndex(index);
+    this.slides.slideTo(index, 500);
+  }
+
+  slideNext() {
+    this.slides.getActiveIndex().then((index) => {
+      if (index + 1 < 4) {
+        this.goActive((index + 1));
+      }
+    });
+  }
+
+  slidePrev() {
+    this.slides.getActiveIndex().then((index) => {
+      if (index - 1 >= 0) {
+        this.goActive((index - 1));
+      }
+    });
+  }
 }

src/app/main/page-detail/page-detail.component.html

+<p>
+  page-detail works!
+</p>

src/app/main/page-detail/page-detail.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-detail',
+  templateUrl: './page-detail.component.html',
+  styleUrls: ['./page-detail.component.scss'],
+})
+export class PageDetailComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

src/app/main/page-four/page-four.component.html

+<p>
+  page-four works!
+</p>

src/app/main/page-four/page-four.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-four',
+  templateUrl: './page-four.component.html',
+  styleUrls: ['./page-four.component.scss'],
+})
+export class PageFourComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

src/app/main/page-one/page-one.component.html

+<p>
+  page-one works!
+</p>

src/app/main/page-one/page-one.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-one',
+  templateUrl: './page-one.component.html',
+  styleUrls: ['./page-one.component.scss'],
+})
+export class PageOneComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

src/app/main/page-three/page-three.component.html

+<p>
+  page-three works!
+</p>

src/app/main/page-three/page-three.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-three',
+  templateUrl: './page-three.component.html',
+  styleUrls: ['./page-three.component.scss'],
+})
+export class PageThreeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

src/app/main/page-two/page-two.component.html

+<p>
+  page-two works!
+</p>

src/app/main/page-two/page-two.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-two',
+  templateUrl: './page-two.component.html',
+  styleUrls: ['./page-two.component.scss'],
+})
+export class PageTwoComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}