message

package-lock.json

@@ -24,6 +24,7 @@
         "@ionic/angular": "^8.0.0",
         "ionicons": "^7.0.0",
         "rxjs": "~7.8.0",
+        "swiper": "^11.1.4",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.2"
       },
@@ -15482,6 +15483,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "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

@@ -29,6 +29,7 @@
     "@ionic/angular": "^8.0.0",
     "ionicons": "^7.0.0",
     "rxjs": "~7.8.0",
+    "swiper": "^11.1.4",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"
   },

src/app/app-routing.module.ts

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

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-routing.module.ts

@@ -14,3 +14,5 @@ const routes: Routes = [
   exports: [RouterModule]
 })
 export class Tab1PageRoutingModule {}
+
+

src/app/tab1/tab1.page.html

@@ -1,268 +1,16 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>
-      Tab 1
-    </ion-title>
+    <ion-searchbar></ion-searchbar>
   </ion-toolbar>
-
-  <link rel="stylesheet" href="./assets/CSS/swiper-bundle.min.css" />
-  <style>
-    html,
-    body {
-      position: relative;
-      height: 100%;
-    }
-
-    body {
-      background: #eee;
-      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
-      font-size: 14px;
-      color: #000;
-      margin: 0;
-      padding: 0;
-    }
-
-    body {
-      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
-      font-size: 14px;
-      color: #000;
-      margin: 0;
-      padding: 0;
-    }
-
-    .swiper {
-      margin: 100px auto;
-      width: 320px;
-      height: 240px;
-    }
-
-    .swiper-slide {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 22px;
-      font-weight: bold;
-      color: #fff;
-    }
-
-    .swiper-slide:nth-child(1n) {
-      background-color: rgb(206, 17, 17);
-    }
-
-    .swiper-slide:nth-child(2n) {
-      background-color: rgb(0, 140, 255);
-    }
-
-    .swiper-slide:nth-child(3n) {
-      background-color: rgb(10, 184, 111);
-    }
-
-    .swiper-slide:nth-child(4n) {
-      background-color: rgb(211, 122, 7);
-    }
-
-    .swiper-slide:nth-child(5n) {
-      background-color: rgb(118, 163, 12);
-    }
-
-    .swiper-slide:nth-child(6n) {
-      background-color: rgb(180, 10, 47);
-    }
-
-    .swiper-slide:nth-child(7n) {
-      background-color: rgb(35, 99, 19);
-    }
-
-    .swiper-slide:nth-child(8n) {
-      background-color: rgb(0, 68, 255);
-    }
-
-    .swiper-slide:nth-child(9n) {
-      background-color: rgb(218, 12, 218);
-    }
-
-    .swiper-slide:nth-child(10n) {
-      background-color: rgb(54, 94, 77);
-    }
-  </style>
+ 
 </ion-header>
 
-<ion-content>
-
-  <!-- Swiper -->
-
-  <div class="swiper mySwiper">
-    <div class="swiper-wrapper">
-      <div class="swiper-slide">Slide 1</div>
-      <div class="swiper-slide">Slide 2</div>
-      <div class="swiper-slide">Slide 3</div>
-      <div class="swiper-slide">Slide 4</div>
-      <div class="swiper-slide">Slide 5</div>
-      <div class="swiper-slide">Slide 6</div>
-      <div class="swiper-slide">Slide 7</div>
-      <div class="swiper-slide">Slide 8</div>
-      <div class="swiper-slide">Slide 9</div>
-    </div>
-  </div>
-  <div class="swiper mySwiper2">
-    <div class="swiper-wrapper">
-      <div class="swiper-slide">Slide 1</div>
-      <div class="swiper-slide">Slide 2</div>
-      <div class="swiper-slide">Slide 3</div>
-      <div class="swiper-slide">Slide 4</div>
-      <div class="swiper-slide">Slide 5</div>
-      <div class="swiper-slide">Slide 6</div>
-      <div class="swiper-slide">Slide 7</div>
-      <div class="swiper-slide">Slide 8</div>
-      <div class="swiper-slide">Slide 9</div>
-    </div>
-  </div>
-  <div class="swiper mySwiper3">
-    <div class="swiper-wrapper">
-      <div class="swiper-slide">Slide 1</div>
-      <div class="swiper-slide">Slide 2</div>
-      <div class="swiper-slide">Slide 3</div>
-      <div class="swiper-slide">Slide 4</div>
-      <div class="swiper-slide">Slide 5</div>
-      <div class="swiper-slide">Slide 6</div>
-      <div class="swiper-slide">Slide 7</div>
-      <div class="swiper-slide">Slide 8</div>
-      <div class="swiper-slide">Slide 9</div>
-    </div>
-  </div>
-  <div class="swiper mySwiper4">
-    <div class="swiper-wrapper">
-      <div class="swiper-slide">Slide 1</div>
-      <div class="swiper-slide">Slide 2</div>
-      <div class="swiper-slide">Slide 3</div>
-      <div class="swiper-slide">Slide 4</div>
-      <div class="swiper-slide">Slide 5</div>
-      <div class="swiper-slide">Slide 6</div>
-      <div class="swiper-slide">Slide 7</div>
-      <div class="swiper-slide">Slide 8</div>
-      <div class="swiper-slide">Slide 9</div>
-    </div>
-  </div>
-  <div class="swiper mySwiper5">
-    <div class="swiper-wrapper">
-      <div class="swiper-slide">Slide 1</div>
-      <div class="swiper-slide">Slide 2</div>
-      <div class="swiper-slide">Slide 3</div>
-      <div class="swiper-slide">Slide 4</div>
-      <div class="swiper-slide">Slide 5</div>
-      <div class="swiper-slide">Slide 6</div>
-      <div class="swiper-slide">Slide 7</div>
-      <div class="swiper-slide">Slide 8</div>
-      <div class="swiper-slide">Slide 9</div>
-    </div>
-  </div>
-  <div class="swiper mySwiper6">
-    <div class="swiper-wrapper">
-      <div class="swiper-slide">Slide 1</div>
-      <div class="swiper-slide">Slide 2</div>
-      <div class="swiper-slide">Slide 3</div>
-      <div class="swiper-slide">Slide 4</div>
-      <div class="swiper-slide">Slide 5</div>
-      <div class="swiper-slide">Slide 6</div>
-      <div class="swiper-slide">Slide 7</div>
-      <div class="swiper-slide">Slide 8</div>
-      <div class="swiper-slide">Slide 9</div>
-    </div>
-  </div>
-
-  <!-- Swiper JS -->
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Tab 1</ion-title>
+    </ion-toolbar>
+  </ion-header>
 
-  <!-- Initialize Swiper -->
-  <script>
-    var swiper = new Swiper(".mySwiper", {
-      grabCursor: true,
-      effect: "creative",
-      creativeEffect: {
-        prev: {
-          shadow: true,
-          translate: [0, 0, -400],
-        },
-        next: {
-          translate: ["100%", 0, 0],
-        },
-      },
-    });
-    var swiper2 = new Swiper(".mySwiper2", {
-      grabCursor: true,
-      effect: "creative",
-      creativeEffect: {
-        prev: {
-          shadow: true,
-          translate: ["-120%", 0, -500],
-        },
-        next: {
-          shadow: true,
-          translate: ["120%", 0, -500],
-        },
-      },
-    });
-    var swiper3 = new Swiper(".mySwiper3", {
-      grabCursor: true,
-      effect: "creative",
-      creativeEffect: {
-        prev: {
-          shadow: true,
-          translate: ["-20%", 0, -1],
-        },
-        next: {
-          translate: ["100%", 0, 0],
-        },
-      },
-    });
-    var swiper4 = new Swiper(".mySwiper4", {
-      grabCursor: true,
-      effect: "creative",
-      creativeEffect: {
-        prev: {
-          shadow: true,
-          translate: [0, 0, -800],
-          rotate: [180, 0, 0],
-        },
-        next: {
-          shadow: true,
-          translate: [0, 0, -800],
-          rotate: [-180, 0, 0],
-        },
-      },
-    });
-    var swiper5 = new Swiper(".mySwiper5", {
-      grabCursor: true,
-      effect: "creative",
-      creativeEffect: {
-        prev: {
-          shadow: true,
-          translate: ["-125%", 0, -800],
-          rotate: [0, 0, -90],
-        },
-        next: {
-          shadow: true,
-          translate: ["125%", 0, -800],
-          rotate: [0, 0, 90],
-        },
-      },
-    });
-    var swiper6 = new Swiper(".mySwiper6", {
-      grabCursor: true,
-      effect: "creative",
-      creativeEffect: {
-        prev: {
-          shadow: true,
-          origin: "left center",
-          translate: ["-5%", 0, -200],
-          rotate: [0, 100, 0],
-        },
-        next: {
-          origin: "right center",
-          translate: ["5%", 0, -200],
-          rotate: [0, -100, 0],
-        },
-      },
-    });
-  </script>
-  
+  <app-explore-container name="Tab 1 page"></app-explore-container>
 </ion-content>

src/app/tab2/tab2.page.html

@@ -1,15 +1,15 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>
-      Tab 2
-    </ion-title>
+    
+      <ion-searchbar></ion-searchbar>
+    
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
   
 
-  <ion-button [routerLink]="['/evaluation']">
+  <ion-button [routerLink]="['/slider']">
     按钮
   </ion-button>
   
@@ -27,6 +27,12 @@
               <img alt="Silhouette of mountains" src="https://q9.itc.cn/q_70/images03/20240219/5b713483c95245b3ab08a97871d5c16a.jpeg" />
             </ion-thumbnail>
             <ion-label>荒野大镖客2</ion-label>
+            <ion-button >
+              角色扮演
+            </ion-button>
+            <ion-button >
+              动作冒险
+            </ion-button>
           </ion-item>
     
           <ion-item>
@@ -54,7 +60,7 @@
     </ion-card>
   
     <div>
-      <!-- <iframe width="600" height="400" src="http://www.baidu.com/link?url=SeinjTJ5YGhJZ9knx4tLWF2b9yhNas5Ts3wBqaxUILs5aPEkUOK2m5_cFCsLZbujNvAb_L1zT5yCXCiNLwVsUReIE4JoEq5C4nA-UvseUdy" frameborder="0" allowfullscreen></iframe> -->
+      <iframe width="600" height="400" src="https://jiangxi.chinatax.gov.cn/media/0/79f4072919d1417e970445030d7b4a42.mp4" frameborder="0" allowfullscreen></iframe> 
     </div>
   </ion-content>
   

src/index.html

@@ -8,7 +8,7 @@
   <base href="/" />
 
   <meta name="color-scheme" content="light dark" />
-  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0" />
   <meta name="format-detection" content="telephone=no" />
   <meta name="msapplication-tap-highlight" content="no" />
 
@@ -17,6 +17,8 @@
   <!-- 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" />
+
+  <link rel="stylesheet" href="assets/swiper/swiper.min.css">
 </head>
 
 <body>