我正在创建离子4加角应用程序。因为我正在使用离子滑动来一一显示一些问题。现在,我想在每10秒后接下来移动离子滑动。
离子幻灯片文档
这是离子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秒更改幻灯片。如果您需要帮助,请注释。
您可以这样做,
.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]