123

FitMind-app/package-lock.json

@@ -27,6 +27,7 @@
         "ionicons": "^7.2.1",
         "parse-server": "^7.3.0",
         "rxjs": "~7.8.0",
+        "swiper": "^11.1.15",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.2"
       },
@@ -21437,6 +21438,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "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",

FitMind-app/package.json

@@ -32,6 +32,7 @@
     "ionicons": "^7.2.1",
     "parse-server": "^7.3.0",
     "rxjs": "~7.8.0",
+    "swiper": "^11.1.15",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"
   },

FitMind-app/src/app/tab1/tab1.page.html

@@ -5,8 +5,28 @@
 </ion-header>
 
 <ion-content [fullscreen]="true" style="background-color: #f4f4f4;">
-  <!-- 单张图片 -->
-  <img src="assets/1.png" alt="推荐图片" style="width: 100%; height: auto; object-fit: cover;" />
+  <div class="carousel-container" style="border-radius: 25px; margin: 5px auto;">
+    <!-- 轮播容器，控制所有图片的横向排列 -->
+    <div class="carousel" [style.transform]="'translateX(-' + currentSlide * 100 + '%)'">
+      <div class="slide" *ngFor="let image of images; let i = index">
+        <img [src]="image" alt="轮播图" class="carousel-image">
+      </div>
+    </div>
+  
+    <!-- 上一张按钮 -->
+    <button class="prev" (click)="prevSlide()">&#10094;</button>
+  
+    <!-- 下一张按钮 -->
+    <button class="next" (click)="nextSlide()">&#10095;</button>
+  
+    <!-- 小圆点 -->
+    <div class="dots">
+      <span class="dot" *ngFor="let image of images; let i = index" 
+            [class.active]="i === currentSlide" 
+            (click)="goToSlide(i)"></span>
+    </div>
+  </div>
+  
 
   <!-- 标签切换 -->
   <ion-segment [(ngModel)]="selectedTab" color="secondary">
@@ -82,4 +102,4 @@
       </ion-row>
     </ion-grid>
   </div>
-</ion-content>
+</ion-content>

FitMind-app/src/app/tab1/tab1.page.scss

@@ -0,0 +1,65 @@
+.carousel-container {
+    position: relative;
+    width: 100%;
+    max-width: 600px;
+    overflow: hidden;
+  }
+  
+  .carousel {
+    display: flex;
+    transition: transform 0.5s ease-in-out;
+  }
+  
+  .slide {
+    min-width: 100%;
+    box-sizing: border-box;
+  }
+  
+  .carousel-image {
+    width: 100%;
+    border-radius: 10px;
+    object-fit: cover;
+  }
+  
+  .prev, .next {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    border: none;
+    font-size: 30px;
+    padding: 10px;
+    cursor: pointer;
+  }
+  
+  .prev {
+    left: 10px;
+  }
+  
+  .next {
+    right: 10px;
+  }
+  
+  .dots {
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+  }
+  
+  .dot {
+    height: 10px;
+    width: 10px;
+    margin: 0 5px;
+    background-color: rgba(255, 255, 255, 0.7);
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+  
+  .dot.active {
+    background-color: white;
+  }
+  

FitMind-app/src/app/tab1/tab1.page.ts

@@ -1,4 +1,4 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { IonicModule, AlertController } from '@ionic/angular';
 import { CommonModule } from '@angular/common';
@@ -16,7 +16,18 @@ import { Router } from '@angular/router';
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
-export class Tab1Page {
+export class Tab1Page implements OnInit {
+  // 为幻灯片设置默认的当前索引
+  currentSlide: number = 0;
+
+  // 图片列表
+  images = [
+    'assets/1.png',
+    'assets/2.png',
+    'assets/3.png'
+  ];
+
+  // 其他数据
   selectedTab: string = 'recommend';
 
   recommendations = [
@@ -36,6 +47,35 @@ export class Tab1Page {
 
   constructor(private router: Router, private alertController: AlertController) {}
 
+  // ngOnInit 生命周期钩子
+  ngOnInit(): void {
+    // 如果需要启动自动轮播功能，可以在这里调用
+    // 例如：this.startAutoSlide();
+  }
+
+  // 显示上一张幻灯片
+  prevSlide(): void {
+    if (this.currentSlide > 0) {
+      this.currentSlide--;
+    } else {
+      this.currentSlide = this.images.length - 1; // 循环到最后一张
+    }
+  }
+
+  // 显示下一张幻灯片
+  nextSlide(): void {
+    if (this.currentSlide < this.images.length - 1) {
+      this.currentSlide++;
+    } else {
+      this.currentSlide = 0; // 循环到第一张
+    }
+  }
+
+  // 跳转到指定的幻灯片
+  goToSlide(index: number): void {
+    this.currentSlide = index;
+  }
+
   // 弹出输入地址和手机号的弹窗
   async promptAddress(): Promise<void> {
     const alert = await this.alertController.create({
@@ -147,4 +187,4 @@ export class Tab1Page {
     });
     await alert.present();
   }
-}
+}