我正在尝试实施Ionic2's Slides,但我无法找到如何设置设置:
离子滑动"选项"已被弃用。请改用ion-slide的输入属性。
我可以找到'输入属性' (例如自动播放,速度,方向),但我不知道在哪里放置它。我找到的每个示例都[options]="slideOptions"
,其中slideOptions
是设置,但是除了已弃用的通知之外,没有其他结果。
我是离子v2和打字稿的新手,我可能会找到一个工作的hacky解决方案,但我想做得对。
ion-content
中的HTML:
<ion-slides [options]="slideOptions">
<ion-slide *ngFor="let item of items">
<img width="20%"src="{{item.thumb.source}}">
</ion-slide>
</ion-slides>
简化课程: 从&#39; ionic-angular&#39;;
导入{幻灯片}@Component({
selector: 'page-example',
templateUrl: 'example.html'
})
export class Example {
public items: any;
private slideOptions: any;
@ViewChild(Slides) slides: Slides;
constructor(private navCtrl: NavController, public navParams: NavParams) {
this.items = [];
this.albumInfo = navParams.get('item');
this.getSlides();
}
// This does nothing:
goToSlide() {
this.slides.slideTo(2, 500);
}
// This does nothing:
ngAfterViewInit() {
this.slides.autoplay = 2000;
}
// Simple example of getting the slides
makeGetRequest():Promise<string> {
/* Get the items code, populates this.items
}
}
答案 0 :(得分:6)
离子载玻片已经改变。确保您已更新到最新的离子版本(2.0) site中列出的输入属性可以直接在html中使用。例如:
<ion-slides pager loop autoplay="2000">
<ion-slide> ... </ion-slide>
</ion-slides>
要使用输入属性中列出的属性以外的属性,可以在HTML中使用变量。
<ion-slides #slides>
...
</ion-slides>
并在TS中使用它:
import { Component, ViewChild } from '@angular/core';
import {Slides} from 'ionic-angular'
export class Example {
@ViewChild(Slides) slides: Slides;
constructor() {}
ngAfterViewInit() {
this.slides.autoplay = 2000;
this.slides.autoplayDisableOnInteraction = false;
}
}
在您的情况下,ngAfterViewInit不执行任何操作,因为您未在html中将变量定义为<ion-slides #slides>
答案 1 :(得分:0)
输入属性仅表示在ion-slides
的html中设置的属性,输出事件是html事件。
例如:
<ion-slides [autoplay]="num">
<ion-slide *ngFor="let item of items">
<img width="20%"src="{{item.thumb.source}}">
</ion-slide>
</ion-slides>
其中num
在具有特定数字值的组件中是可变的。