Ionic (离子/Angular )Swiper.js自动播放未运行

of1yzvn4  于 2022-12-08  发布在  Ionic
关注(0)|答案(2)|浏览(182)

--问题--

你好,我不明白为什么滑动器不像自动播放必须启动。
当我查看(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。*
    主页.页面.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() {}
}

主页.页面.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>

主页.页面.scss为空

7tofc5zh

7tofc5zh1#

没有办法,同样的问题在这里。我是返回到旧的方式(不赞成),直到这个错误修复。旧的方式-〉使用旧的离子组件和
老办法-〉

Component.ts

import SwiperCore, { Autoplay, Keyboard, Pagination } from 'swiper';
import { IonicSlides } from '@ionic/angular';
SwiperCore.use([Autoplay, Keyboard, Pagination,  IonicSlides]);

并导入模板组件. html-〉

<ion-content id="presentation">
    
        <ion-slides [options]="{ autoplay:true} (ionSlideReachEnd)="onReachEnd()">
    
            <ion-slide *ngFor="let item of data" swiperSlide>
            </ion-slide>
        </ion-slides>
     </ion-content>
xxslljrj

xxslljrj2#

For my Ionic 6 / Angular project, I needed to obtain a reference to the Swiper and then set the "running" property to true for it to actually start moving.
I.e. in your component HTML:

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

In your page.ts obtain the reference to that component:

@ViewChild('swiperComponent') swiperComponent: SwiperComponent;

And then:

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

Bit of a hack but it fixed it for me.

相关问题