feat: swiper works

src/app/app.module.ts

@@ -9,7 +9,7 @@ import { AppComponent } from './app.component';
 import { provideHttpClient } from '@angular/common/http'; // 引用HttpClient方法
 import { Diagnostic } from '@awesome-cordova-plugins/diagnostic/ngx'; // 引用移动端授权检测供应器
 import Parse from "parse";// 设置Parse服务属性
-import { SwiperModule } from 'swiper/angular'; // 导入 SwiperModule
+// import { SwiperModule } from 'swiper/angular'; // 导入 SwiperModule
 Parse.initialize("ncloudmaster");
 Parse.serverURL = "https://server.fmode.cn/parse";
 localStorage.setItem("NOVA_APIG_SERVER", 'aHR0cHMlM0ElMkYlMkZzZXJ2ZXIuZm1vZGUuY24lMkZhcGklMkZhcGlnJTJG')
@@ -17,7 +17,9 @@ localStorage.setItem("NOVA_APIG_SERVER", 'aHR0cHMlM0ElMkYlMkZzZXJ2ZXIuZm1vZGUuY2
 Parse.User.become('r:b86ae57d94d26cbbfce6a1515c3946ee')
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, SwiperModule],
+  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule
+    // , SwiperModule
+  ],
   providers: [
     // 添加HttpClient供应器
     provideHttpClient(),

src/app/tab1/tab1.page.html

@@ -24,7 +24,7 @@
     </div>
   </div>
   <!-- 添加轮播图 -->
-  <app-comp-swiper [list]="imageList" [options]="{ direction: 'vertical'}" style="height:200px"></app-comp-swiper>
+  <app-comp-swiper [list]="imageList" style="height:200px"></app-comp-swiper>
   <!-- 分隔线 -->
   <hr class="divider" />
   <div class="background-box">

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

@@ -11,7 +11,7 @@ const routes: Routes = [
       {
         path: 'tab1',
         loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule),
-        canActivate: [AuthGuard],
+        // canActivate: [AuthGuard],
       },
       {
         path: 'tab2',

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

@@ -15,8 +15,8 @@
   <!-- 分页 -->
   <div class="swiper-pagination"></div>
   <!-- 导航按钮 -->
-  <div class="swiper-button-prev"></div>
-  <div class="swiper-button-next"></div>
+  <div class="swiper-button-prev" (click)="swiper?.slidePrev()"></div>
+  <div class="swiper-button-next" (click)="swiper?.slideNext()"></div>
   <!-- 滚动条 -->
   <div class="swiper-scrollbar"></div>
 </div>

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

@@ -26,12 +26,17 @@ export class CompSwiperComponent  implements AfterViewInit {
   // 输入属性：轮播图的高度和宽度
   @Input() height:string = "225px";
   @Input() width:string = "100%";
+
+  swiper:Swiper|undefined
   constructor() { }
   // 视图渲染完成后初始化 Swiper
   ngAfterViewInit() {
 
     let defaultOptions:any = {
       loop:true,// 开启循环播放
+      autoplay:{
+        duration:5000,
+      },
       pagination: {
         el: '.swiper-pagination',
       },
@@ -46,6 +51,7 @@ export class CompSwiperComponent  implements AfterViewInit {
         defaultOptions[key] = this.options[key]
       ])
     }
-    const swiper = new Swiper(".swiper",defaultOptions);
+    this.swiper = new Swiper(".swiper",defaultOptions);
+    console.log(this.swiper)
   }
 }