feat: new swiper page

angular.json

@@ -31,7 +31,9 @@
                 "output": "./svg"
               }
             ],
-            "styles": ["src/global.scss", "src/theme/variables.scss"],
+            "styles": [
+              "src/global.scss", "src/theme/variables.scss"
+            ],
             "scripts": []
           },
           "configurations": {

package-lock.json

@@ -26,6 +26,7 @@
         "ionicons": "^7.0.0",
         "parse": "^5.1.0",
         "rxjs": "~7.8.0",
+        "swiper": "^11.1.4",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.2"
       },
@@ -16753,6 +16754,24 @@
       "integrity": "sha512-JaKkGHHfGvRrcMPdJWkssLBeWqM+Isg/a09H7kgNNajT1cX5AztDTNs+C8UzpCxjCTRrG34WbquwaovZbmSk9g==",
       "dev": true
     },
+    "node_modules/swiper": {
+      "version": "11.1.4",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-11.1.4.tgz",
+      "integrity": "sha512-1n7kbYJB2dFEpUHRFszq7gys/ofIBrMNibwTiMvPHwneKND/t9kImnHt6CfGPScMHgI+dWMbGTycCKGMoOO1KA==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/symbol-observable": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/symbol-observable/-/symbol-observable-4.0.0.tgz",

package.json

@@ -31,6 +31,7 @@
     "ionicons": "^7.0.0",
     "parse": "^5.1.0",
     "rxjs": "~7.8.0",
+    "swiper": "^11.1.4",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"
   },

src/app/app-routing.module.ts

@@ -16,6 +16,10 @@ const routes: Routes = [
   },
  {
     path: 'tsdatatype',
     loadChildren: () => import('./tsdatatype/tsdatatype.module').then( m => m.TsdatatypePageModule)
+  },
+  {
+    path: 'slider',
+    loadChildren: () => import('./slider/slider.module').then( m => m.SliderPageModule)
   }
 
 ];

src/app/slider/README.md

@@ -0,0 +1,92 @@
+# Swiper的具体使用
+
+
+# 安装Swiper依赖
+- 参考:https://swiperjs.com/element
+
+> 注意:请在项目根目录,和package.json同级运行
+> 右键package.json 集成终端打开(integration terminal)
+``` bash
+ls
+npm install swiper -S
+```
+
+# 配置css样式文件
+- 创建目录src/assets/swiper/
+- 打开node_modules/swiper
+- 复制swiper.min.css至src/assets/swiper/下
+
+- /src/index.html的head区域写入
+``` html
+<!-- Swiper轮播图样式 -->
+<link rel="stylesheet" href="assets/swiper/swiper.min.css">
+```
+
+# 用Swiper类进行创建
+- html添加轮播区域
+``` html
+
+  <!-- Swiper轮播图 手动创建 -->
+  <!-- Slider main container -->
+   <button (click)="slide1?.slideNext()">next</button>
+   <div #slide1Comp class="swiper">
+    <!-- Additional required wrapper -->
+    <div class="swiper-wrapper">
+      <!-- Slides -->
+      <div class="swiper-slide">Slide 1</div>
+      <div class="swiper-slide">Slide 2</div>
+      <div class="swiper-slide">Slide 3</div>
+    </div>
+    <!-- If we need pagination -->
+    <div class="swiper-pagination"></div>
+
+    <!-- If we need navigation buttons -->
+    <div class="swiper-button-prev"></div>
+    <div class="swiper-button-next"></div>
+
+    <!-- If we need scrollbar -->
+    <div class="swiper-scrollbar"></div>
+  </div>
+```
+- 使用Swiper类创建
+``` ts
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+
+import Swiper from 'swiper';
+
+@Component({
+  selector: 'app-slider',
+  templateUrl: './slider.page.html',
+  styleUrls: ['./slider.page.scss'],
+})
+export class SliderPage implements OnInit {
+  @ViewChild("slide1Comp") slide1Comp:ElementRef |undefined
+  constructor() { }
+
+  ngOnInit() {
+    // 延迟500毫秒加载
+    setTimeout(() => {
+      this.initSwiper();
+    }, 500);
+  }
+
+  // 初始化轮播图
+  slide1:Swiper|undefined
+  initSwiper(){
+    console.log(this.slide1Comp)
+    this.slide1 = new Swiper(this.slide1Comp?.nativeElement, {
+      loop:true,
+      autoplay:{
+        delay:500,
+      },
+      mousewheel: {
+        forceToAxis: true,
+      },
+      pagination:{
+        el:".swiper-pagination",
+        clickable:true
+      }
+    });
+  }
+}
+```

src/app/slider/slider-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { SliderPage } from './slider.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: SliderPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SliderPageRoutingModule {}

src/app/slider/slider.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { SliderPageRoutingModule } from './slider-routing.module';
+
+import { SliderPage } from './slider.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    SliderPageRoutingModule
+  ],
+  declarations: [SliderPage]
+})
+export class SliderPageModule {}

src/app/slider/slider.page.html

@@ -0,0 +1,36 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>轮播图Slider Swiper.js</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">slider</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <!-- Swiper轮播图 手动创建 -->
+  <!-- Slider main container -->
+   <button (click)="slide1?.slideNext()">next</button>
+   <div #slide1Comp class="swiper">
+    <!-- Additional required wrapper -->
+    <div class="swiper-wrapper">
+      <!-- Slides -->
+      <div class="swiper-slide">Slide 1</div>
+      <div class="swiper-slide">Slide 2</div>
+      <div class="swiper-slide">Slide 3</div>
+    </div>
+    <!-- If we need pagination -->
+    <div class="swiper-pagination"></div>
+
+    <!-- If we need navigation buttons -->
+    <div class="swiper-button-prev"></div>
+    <div class="swiper-button-next"></div>
+
+    <!-- If we need scrollbar -->
+    <div class="swiper-scrollbar"></div>
+  </div>
+  
+</ion-content>

src/app/slider/slider.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SliderPage } from './slider.page';
+
+describe('SliderPage', () => {
+  let component: SliderPage;
+  let fixture: ComponentFixture<SliderPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SliderPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/slider/slider.page.ts

@@ -0,0 +1,40 @@
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+
+import Swiper from 'swiper';
+
+@Component({
+  selector: 'app-slider',
+  templateUrl: './slider.page.html',
+  styleUrls: ['./slider.page.scss'],
+})
+export class SliderPage implements OnInit {
+  @ViewChild("slide1Comp") slide1Comp:ElementRef |undefined
+  constructor() { }
+
+  ngOnInit() {
+    // 延迟500毫秒加载
+    setTimeout(() => {
+      this.initSwiper();
+    }, 500);
+  }
+
+  // 初始化轮播图
+  slide1:Swiper|undefined
+  initSwiper(){
+    console.log(this.slide1Comp)
+    this.slide1 = new Swiper(this.slide1Comp?.nativeElement, {
+      loop:true,
+      autoplay:{
+        delay:500,
+      },
+      mousewheel: {
+        forceToAxis: true,
+      },
+      pagination:{
+        el:".swiper-pagination",
+        clickable:true
+      }
+    });
+  }
+
+}

src/app/tab1/tab1.page.html

@@ -15,6 +15,7 @@
 
   <div *ngIf="safeHTML" [innerHTML]="safeHTML"></div>
   <ion-button expand="block" routerLink="/tsdatatype">示例：TS数据类型与模板</ion-button>
+  <ion-button expand="block" routerLink="/slider">示例：Swiper轮播图插件</ion-button>
   <ion-button expand="block" routerLink="/tabs/tab2">示例：通讯录列表</ion-button>
   <ion-button expand="block" (click)="openGit()">代码：study-ng-contact</ion-button>
   <ion-button expand="block" routerLink="/aigc/chat">示例：AI对话示例</ion-button>

src/global.scss

@@ -1,3 +1,4 @@
+
 /*
  * App Global CSS
  * ----------------------------------------------------------------------------
@@ -35,3 +36,8 @@
 /* @import "@ionic/angular/css/palettes/dark.always.css"; */
 /* @import "@ionic/angular/css/palettes/dark.class.css"; */
 // @import "@ionic/angular/css/palettes/dark.system.css";
+
+// 引用Swiper样式
+// @import url('swiper/swiper.scss');
+// @import "swiper/swiper.min.css"
+// @import "@ionic/angular/css/palettes/dark.always.css";

src/index.html

@@ -17,6 +17,9 @@
   <!-- add to homescreen for ios -->
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+
+  <!-- Swiper轮播图样式 -->
+  <link rel="stylesheet" href="assets/swiper/swiper.min.css">
 </head>
 
 <body>