settings/src/app/tab1/tab1.page.ts

import { MenuController, NavController } from '@ionic/angular';
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import Swiper from 'swiper';
import { trigger, transition, style, animate } from '@angular/animations';
@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss'],
  animations: [
    trigger('imageAnimation', [
      transition('void => *', [
        style({ opacity: 0 }),
        animate('500ms', style({ opacity: 1 }))
      ]),
      transition('* => void', [
        animate('500ms', style({ opacity: 0 }))
      ])
    ])
  ]
})
export class Tab1Page {
  images: string[] = ['../../assets/images/3.png', '../../assets/images/2.jpg', '../../assets/images/4.jpg'];
  currentImageIndex: number = 0;

  changeImage(direction: number) {
    this.currentImageIndex += direction;
    if (this.currentImageIndex < 0) {
      this.currentImageIndex = this.images.length - 1;
    } else if (this.currentImageIndex >= this.images.length) {
      this.currentImageIndex = 0;
    }
  }
  @ViewChild("slide1Comp") slide1Comp:ElementRef |undefined
  changeTab: string = 'default';
  changeSegment(segment: string) {
    this.changeTab = segment;
  }
  constructor(private menuCtrl: MenuController) {}
  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
  }
});
}
  toggleMenu() {
    this.menuCtrl.toggle(); // 切换菜单的展开和收起状态
  }


shishang(event:any){
  this.changeTab=event.detail.value;
}
startDressing() {
  // 开始换装逻辑
  this.changeTab = "segment";
}

returnToHome() {
  // 返回首页逻辑
  this.changeTab = "default";
}

uploadImage() {
  // 上传图片逻辑
  console.log('上传图片');
}

selectClothing() {
  // 选择服装逻辑
  console.log('选择服装');
}

save() {
  // 保存逻辑
  console.log('保存');
}

submit() {
  // 提交逻辑
  this.changeTab = "buttons";
}

share() {
  // 分享逻辑
  console.log('分享');
}
onFileSelected(event: any) {
  const file: File = event.target.files[0];
  // 可以在这里处理上传的文件，例如显示预览图像或上传到服务器
  // 这里只是简单示例，你可以根据实际需求进行处理
  console.log('Selected file:', file);
}
}