feat: new comp-swiper

package-lock.json

@@ -42,6 +42,7 @@
         "parse": "^5.3.0",
         "pdf-parse": "^1.1.1",
         "rxjs": "~7.8.0",
+        "swiper": "^11.1.15",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.2"
       },
@@ -21175,6 +21176,25 @@
       "dev": true,
       "license": "BSD-2-Clause"
     },
+    "node_modules/swiper": {
+      "version": "11.1.15",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-11.1.15.tgz",
+      "integrity": "sha512-IzWeU34WwC7gbhjKsjkImTuCRf+lRbO6cnxMGs88iVNKDwV+xQpBCJxZ4bNH6gSrIbbyVJ1kuGzo3JTtz//CBw==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "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

@@ -47,6 +47,7 @@
     "parse": "^5.3.0",
     "pdf-parse": "^1.1.1",
     "rxjs": "~7.8.0",
+    "swiper": "^11.1.15",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"
   },

src/app/tab3/tab3.page.html

@@ -7,6 +7,13 @@
 </ion-header>
 
 <ion-content [fullscreen]="true">
+
+  
   <ion-button routerLink="/face/feat68">面部向量RAG</ion-button>
   <ion-button routerLink="/story/hangzhou">RAG：杭州人才政策</ion-button>
+  
+  <comp-swiper [list]="imageList" style="height:200px"></comp-swiper>
+  
+  <comp-swiper [list]="imageList2" [options]="{ direction: 'vertical'}" style="height:200px"></comp-swiper>
+
 </ion-content>

src/app/tab3/tab3.page.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { IonHeader, IonButton, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
 import { RouterModule } from '@angular/router';
+import { CompSwiperComponent } from 'src/lib/comp-swiper/comp-swiper.component';
 
 @Component({
   selector: 'app-tab3',
@@ -9,9 +10,18 @@ import { RouterModule } from '@angular/router';
   standalone: true,
   imports: [
     IonHeader, IonToolbar, IonTitle, IonContent, 
-    IonButton, RouterModule
+    IonButton, RouterModule,
+    CompSwiperComponent
   ],
 })
 export class Tab3Page {
+  imageList:Array<any> = [
+    {img:"https://tse2-mm.cn.bing.net/th/id/OIP-C.sD15E_-sEqY4p37kQPhJywHaD4?rs=1&pid=ImgDetMain"},
+    {img:"https://img-blog.csdnimg.cn/img_convert/33bda5f420f076384c3013ddd7bd70b6.png"},
+  ]
+  imageList2:Array<any> = [
+    {img:"https://tse1-mm.cn.bing.net/th/id/OIP-C.Sqa-oqMbnqRLWGIbMdwuPQHaDJ?rs=1&pid=ImgDetMain"},
+    {img:"https://www.itbaizhan.com/wiki/imgs/image-20220218143925861.png"},
+  ]
   constructor() {}
 }

src/lib/comp-swiper/README.md

@@ -0,0 +1,25 @@
+# 轮播图组件
+
+# 参考文档
+- 官方API：https://swiperjs.com/swiper-api
+- 官方示例：https://swiperjs.com/get-started
+
+# 使用方法
+
+``` html
+<comp-swiper [list]="imageList" style="height:200px"></comp-swiper>
+<comp-swiper [list]="imageList2" [options]="{ direction: 'vertical'}" style="height:200px"></comp-swiper>
+```
+``` ts
+export class YourPage {
+  imageList:Array<any> = [
+    {img:"https://tse2-mm.cn.bing.net/th/id/OIP-C.sD15E_-sEqY4p37kQPhJywHaD4?rs=1&pid=ImgDetMain"},
+    {img:"https://img-blog.csdnimg.cn/img_convert/33bda5f420f076384c3013ddd7bd70b6.png"},
+  ]
+  imageList2:Array<any> = [
+    {img:"https://tse1-mm.cn.bing.net/th/id/OIP-C.Sqa-oqMbnqRLWGIbMdwuPQHaDJ?rs=1&pid=ImgDetMain"},
+    {img:"https://www.itbaizhan.com/wiki/imgs/image-20220218143925861.png"},
+  ]
+}
+
+```

src/lib/comp-swiper/comp-swiper.component.html

@@ -0,0 +1,24 @@
+<!-- Slider main container -->
+<div class="swiper" [style.height]="height">
+    <!-- Additional required wrapper -->
+    <div class="swiper-wrapper">
+      <!-- Slides -->
+      @for(slide of list; track slide){
+        <div class="swiper-slide">
+          @if(slide?.img){
+            <img [src]="slide?.img">
+          }
+        </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>

src/lib/comp-swiper/comp-swiper.component.scss

@@ -0,0 +1,17 @@
+// import Swiper styles
+@import 'swiper/css';
+@import 'swiper/css/navigation';
+@import 'swiper/css/pagination';
+
+.swiper{
+    min-height: 150px;
+    .swiper-slide{
+        width:100%;
+        height:150px;
+        img{
+            height:100%;
+            width:100%;
+            object-fit: cover;
+        }
+    }
+}

src/lib/comp-swiper/comp-swiper.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { CompSwiperComponent } from './comp-swiper.component';
+
+describe('CompSwiperComponent', () => {
+  let component: CompSwiperComponent;
+  let fixture: ComponentFixture<CompSwiperComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [CompSwiperComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CompSwiperComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/lib/comp-swiper/comp-swiper.component.ts

@@ -0,0 +1,54 @@
+import { Component, AfterViewInit, Input } from '@angular/core';
+// import Swiper JS
+import Swiper from 'swiper';
+
+interface SwiperSlide{
+  title?:string
+  img?:string
+  innerHTML?:string
+}
+
+@Component({
+  selector: 'comp-swiper',
+  templateUrl: './comp-swiper.component.html',
+  styleUrls: ['./comp-swiper.component.scss'],
+  standalone: true,
+})
+export class CompSwiperComponent  implements AfterViewInit {
+
+  @Input() list:SwiperSlide[] = []
+  /**
+   * 轮播图参数
+   * @see https://swiperjs.com/swiper-api
+   */
+  @Input() options:any
+
+  @Input() height:string = "150px";
+  @Input() width:string = "100%";
+  constructor() { }
+
+  ngAfterViewInit() {
+
+    let defaultOptions:any = {
+      loop:true,
+      // // If we need pagination
+      // pagination: {
+      //   el: '.swiper-pagination',
+      // },
+
+      // // Navigation arrows
+      // navigation: {
+      //   nextEl: '.swiper-button-next',
+      //   prevEl: '.swiper-button-prev',
+      // },
+    }
+
+    if(this.options){
+      Object.keys(this.options).forEach(key=>[
+        defaultOptions[key] = this.options[key]
+      ])
+    }
+    const swiper = new Swiper(".swiper",defaultOptions);
+  }
+
+}