如何在 Ionic 4 中每 10 秒后移动 Ion-Slides？答案

【问题标题】：How to move Ion-Slides next after every 10 second in Ionic 4?如何在 Ionic 4 中每 10 秒后移动 Ion-Slides？
【发布时间】：2019-10-10 22:39:37
【问题描述】：

我正在创建 Ionic 4 plus Angular 应用程序。在那我正在使用 Ion-Slides 来一一显示问题的数量。现在我想每隔 10 秒移动一次 Ion-Slides。

Ionic Slides Documentation

【问题讨论】：

标签： html typescript angular6 ionic4

【解决方案1】：

这是离子4的解释

html.

   <ion-slides  [options]="slideOpts"  > 
          <ion-slide *ngFor="let item of cars">
            <img src="{{item}}" width="400px" height="250px">
          </ion-slide>
   </ion-slides>

.ts

import { Component, ViewChild } from '@angular/core';
import {IonSlides} from '@ionic/angular';
export class HomePage {
     @ViewChild(IonSlides) slides: IonSlides;

cars=[
"https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Front-view-52648.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Right-Front-Three-Quarter-52645.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Right-Side-52646.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Left-Front-Three-Quarter-52647.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Front-view-52649.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Rear-view-52650.jpg?v=201711021421&q=80"

];




ngOnInit(){
  this.slides.startAutoplay().then(()=>{})}
}
 slideOpts = {
   speed: 10000
  };

您可以使用 ViewChild 获取组件，然后您可以在页面初始化时使用其方法。您链接的文档中提到了startAutoplay()。幻灯片选项允许您设置过渡的速度。如果您想要一个真正的解决方案，即每 10 秒翻转一次幻灯片，您可以编写一个每 10 秒更改一次幻灯片的异步方法。如果您需要帮助，请发表评论。

【讨论】：

嗨，基本上我在每张幻灯片上都有问题，并且每次更换幻灯片时都使用倒数计时器 10 秒。
但是 10 秒后一张幻灯片移动到下一张，（角度 6 倒计时）倒计时计时器未重新启动。我遇到了这个问题。

【解决方案2】：

你可以这样做，

.html

<ion-slides  #slid autoplay="5000" loop="true" speed="500" pager="true"  > 
          <ion-slide *ngFor="let item of cars">
            <img src="{{item}}" width="400px" height="250px">
          </ion-slide>
        </ion-slides>

.ts

import { Component, OnInit, ViewChild } from '@angular/core';

import { Platform } from 'ionic-angular';

import { TabsPage } from '../pages/tabs/tabs';




@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = TabsPage;


cars=[
"https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Front-view-52648.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Right-Front-Three-Quarter-52645.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Right-Side-52646.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Left-Front-Three-Quarter-52647.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Front-view-52649.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Rear-view-52650.jpg?v=201711021421&q=80"

];


}

这里是 stackblitz 链接 [https://stackblitz.com/edit/ionic-8qkwca]

【讨论】：

您好先生，鉴于 Stackblitz 链接未打开。
这不是ionic 3的解释吗？
这也可以，但我需要离子 4。谢谢。