angular - ( ionic /Angular )Swiper.js 自动播放未运行

Question

—— 问题——

你好，我不明白为什么刷卡器没有像自动播放那样启动。

当我查看 (swiper) 事件中的 swiper 实例时，我得到了这个结果:

1. swiper.params.autoplay: {delay: 1000, enabled: true}
2. swiper.autoplay: { running: false, paused: false, pause: [Function], run: [Function], start: [Function], stop: [Function] }

似乎刷卡器正确加载了我的配置，但不会启动自动播放。

希望有人能理解为什么并帮助这个线程🙏。

——代码——

我在 NgModule (home.module.ts) 的导入中添加了 SwiperModule。

home.page.ts

import { Component, OnInit } from '@angular/core';
import Swiper, { Autoplay } from 'swiper';
import { IonicSlides } from '@ionic/angular';

SwiperCore.use([ Autoplay, IonicSlides ]);

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: [ './home.page.scss' ]
})
export class HomePage implements OnInit {

  swiperConfig = {
    slidesPerView: 1,
    spaceBetween: 0,
    autoplay: {
      delay: 1000
    }
  }

  constructor() {}
  ngOnInit() {}
}

home.page.html

<ion-content [fullscreen]="true">
  <swiper direction="horizontal" [config]="swiperConfig">
    <ng-template swiperSlide>Slide 1</ng-template>
    <ng-template swiperSlide>Slide 2</ng-template>
    <ng-template swiperSlide>Slide 3</ng-template>
    <ng-template swiperSlide>Slide 4</ng-template>
  </swiper>
</ion-content>

home.page.scss 为空

Answer 1

对于我的 Ionic 6/Angular 项目，我需要获取对 Swiper 的引用，然后将“running”属性设置为 true 以使其真正开始移动。

即在您的组件 HTML 中:

<swiper ... other properties ... #swiperComponent>

在您的 page.ts 中获取对该组件的引用:

@ViewChild('swiperComponent') swiperComponent: SwiperComponent;

然后:

ngAfterViewInit() {
   this.swiperComponent.swiperRef.autoplay.running = true;
}

有点乱，但它为我修复了它。