我的离子笔记

npm install -g @ionic/cli
ionic start myapp tabs --capacitor --type=angular
ionic generate [schematic] [name]

# schematic 可选值: pages, components, directives, services

ionic start myswiperapp blank --type=angular
cd ./myswiperapp
npm install swiper@latest

import { Component } from '@angular/core';
// swiper.js
import { register } from "swiper/element/bundle";
register();

@Component({
  // ...
})
export class AppComponent {
  // ...
}

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonicSlides } from '@ionic/angular/standalone'; // 导入Ionic Slides模块

@Component({
  selector: 'app-banner',
  templateUrl: './banner.component.html',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA] // 关键：使用CUSTOM_ELEMENTS_SCHEMA
})
export class BannerComponent {
  swiperModules = [IonicSlides]; // 使用Ionic Slides
  banners = [
    { id: 1, banner: 'assets/banner/1.jpg', active: true },
    { id: 2, banner: 'assets/banner/2.jpg', active: true },
    { id: 3, banner: 'assets/banner/3.jpg', active: true },
    { id: 4, banner: 'assets/banner/4.jpg', active: true },
  ];
}

<swiper-container autoplay="true">
  <swiper-slide *ngFor="let banner of banners; trackBy: trackById">{{banner.id}}</swiper-slide>
</swiper-container>