新增登录页

package.json

@@ -13,6 +13,7 @@
   },
   "private": true,
   "dependencies": {
+    "@angular/animations": "^7.2.2",
     "@angular/common": "^7.2.2",
     "@angular/core": "^7.2.2",
     "@angular/forms": "^7.2.2",

src/app/animations/toLeftAndBack.ts

+import {trigger, style, state, transition, animate} from '@angular/animations';
+
+export const toLeft = trigger('toLeft', [
+    state('toLeft', style({
+        'transform': 'translateX(-80px)'
+    })),
+    state('backLeft', style({
+        'transform': 'translateX(0)'
+    })),
+    transition('toLeft => backLeft', animate('250ms')),
+    transition('backLeft => toLeft', animate('250ms'))
+]);

src/app/animations/toRightAndBack.ts

+import {trigger, style, state, transition, animate} from '@angular/animations';
+
+export const toRight = trigger('toRight', [
+    state('toRight', style({
+        'transform': 'translateX(80px)'
+    })),
+    state('backRight', style({
+        'transform': 'translateX(0)'
+    })),
+    transition('toRight => backRight', animate('250ms')),
+    transition('backRight => toRight', animate('250ms'))
+]);

src/app/app-routing.module.ts

@@ -4,6 +4,7 @@ import { Routes, RouterModule } from '@angular/router';
 const routes: Routes = [
   { path: '', redirectTo: 'home', pathMatch: 'full' },
   { path: 'home', loadChildren: './home/home.module#HomePageModule' },
+  { path: 'extra', loadChildren: './extra/extra.module#ExtraPageModule' },
 ];
 
 @NgModule({

src/app/app.module.ts

 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouteReuseStrategy } from '@angular/router';
 
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
@@ -12,7 +13,7 @@ import { AppRoutingModule } from './app-routing.module';
 @NgModule({
   declarations: [AppComponent],
   entryComponents: [],
-  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
+  imports: [BrowserModule, BrowserAnimationsModule, IonicModule.forRoot(), AppRoutingModule],
   providers: [
     StatusBar,
     SplashScreen,

src/app/extra/extra.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ExtraPage } from './extra.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ExtraPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [ExtraPage]
+})
+export class ExtraPageModule {}

src/app/extra/extra.page.html

+<ion-header>
+  <ion-toolbar>
+    <ion-title>extra</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content padding>
+
+</ion-content>

src/app/extra/extra.page.ts

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

src/app/extra/login/login.component.html

+<p>
+  login works!
+</p>

src/app/extra/login/login.component.ts

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

src/app/home/home.page.html

 <ion-slides id="slideComponent" style="width: 100%;height: 100%;"
-            mode="ios" [options]="options" (ionSlideDidChange)="slideOnChange()">
+            mode="ios" [options]="options" [@toLeft]="toLeft" [@toRight]="toRight" (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>
+    <div class="box" style="color: #ffd31a"><app-page-one></app-page-one></div>
   </ion-slide>
   <ion-slide>
-    <div class="box" style="color: #f04141"><h1>2222</h1></div>
+    <div class="box" style="color: #f04141"><app-page-two></app-page-two></div>
   </ion-slide>
   <ion-slide>
-    <div class="box" style="color: #7e57ff"><h1>3333</h1></div>
+    <div class="box" style="color: #7e57ff"><app-page-three></app-page-three></div>
   </ion-slide>
   <ion-slide>
-    <div class="box" style="color: #cccccc"><h1>4444</h1></div>
+    <div class="box" style="color: #cccccc"><app-page-four></app-page-four></div>
   </ion-slide>
 </ion-slides>
 <ion-row class="bottomPart">

src/app/home/home.page.scss

@@ -15,10 +15,6 @@
   color: #ffffff;
 }
 
-.inBox {
-
-}
-
 .box {
   width: 100%;
   height: 100%;

src/app/home/home.page.ts

 import { Component, ViewChild, OnInit } from '@angular/core';
 import { IonSlides } from '@ionic/angular';
+import 'web-animations-js/web-animations.min';
+import { toLeft } from '../animations/toLeftAndBack';
+import { toRight } from '../animations/toRightAndBack';
 
 @Component({
   selector: 'app-home',
   templateUrl: 'home.page.html',
   styleUrls: ['home.page.scss'],
+  animations: [toLeft, toRight]
 })
-export class HomePage implements OnInit{
+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;
+  toLeft = 'backLeft';
+  toRight = 'backRight';
 
   ngOnInit() {
     document.getElementById('slideComponent').addEventListener('touchstart', <TouchEvent>(e) => {
@@ -38,9 +40,9 @@ export class HomePage implements OnInit{
     });
     document.getElementById('slideComponent').addEventListener('touchend', <TouchEvent>(e) => {
       e.preventDefault();
-      if ( this.X > 0 ) {
+      if ( this.X > 50 ) {
         this.slidePrev();
-      } else if ( this.X < 0 ) {
+      } else if ( this.X < -50 ) {
         this.slideNext();
       }
     });
@@ -67,6 +69,8 @@ export class HomePage implements OnInit{
     this.slides.getActiveIndex().then((index) => {
       if (index + 1 < 4) {
         this.goActive((index + 1));
+      } else {
+        this.atLast();
       }
     });
   }
@@ -75,7 +79,23 @@ export class HomePage implements OnInit{
     this.slides.getActiveIndex().then((index) => {
       if (index - 1 >= 0) {
         this.goActive((index - 1));
+      } else {
+        this.atFirst();
       }
     });
   }
+
+  atFirst() {
+    this.toRight = 'toRight';
+    setTimeout(() => {
+      this.toRight = 'backRight';
+    }, 250);
+  }
+
+  atLast() {
+    this.toLeft = 'toLeft';
+    setTimeout(() => {
+      this.toLeft = 'backLeft';
+    }, 250);
+  }
 }

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

-<p>
-  page-one works!
-</p>
+<ion-slides style="width: 100%;height: 200px;"
+            mode="ios" [options]="options">
+  <ion-slide>
+    <div class="inBox" style="color: #ffd31a"><h1>这是首页轮播图1</h1></div>
+  </ion-slide>
+  <ion-slide>
+    <div class="inBox" style="color: #f04141"><h1>这是首页轮播图2</h1></div>
+  </ion-slide>
+  <ion-slide>
+    <div class="inBox" style="color: #7e57ff"><h1>这是首页轮播图3</h1></div>
+  </ion-slide>
+  <ion-slide>
+    <div class="inBox" style="color: #cccccc"><h1>这是首页轮播图4</h1></div>
+  </ion-slide>
+</ion-slides>

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

@@ -7,6 +7,10 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PageOneComponent implements OnInit {
 
+  options = {
+    speed: 1000,
+    allowTouchMove: true
+  };
   constructor() { }
 
   ngOnInit() {}