Question

我在构建图库视图时实现了ion-slides。但有一点我注意到ion-serve -l应用程序是只有iOS 跟随初始幻灯片，但Windows和Android总是从第一个开始...这是我的代码

home.html的

<ion-content class="slide">
    <ion-slides [options]="slideOptions">
        <ion-slide *ngFor="let element of list">
            <img src="{{element.image_path}}"/>
        </ion-slide>
    </ion-slides>
</ion-content>

home.ts

import {Component} from '@angular/core';
import {NavController, NavParams, Slides} from 'ionic-angular';

@Component({
    templateUrl: 'build/pages/home/home.html'
})

export class HomePage {
    slideOptions;
    list;

    constructor(private nav: NavController, private params: NavParams) {
            this.slideOptions = {
                initialSlide: 5,
                pager: true 
            };
        // Assume that the data is from the variable list I give values to here
    }
}

有人可以帮忙吗？

Answer 1

我假设您使用的是最新的Ionic版本，代码将与最新版本一起使用。

您需要修改home.ts，如下所示：

import {Component} from '@angular/core';
import {NavController, NavParams, Slides} from 'ionic-angular';

@Component({
    templateUrl: 'build/pages/home/home.html'
})

export class HomePage {
@ViewChild(Slides) slides: Slides;

list;

constructor(private nav: NavController, private params: NavParams) {

}

ionViewDidEnter(){
  this.slides.slideTo(5);
}
}

并按如下所示更改home.html：

<ion-content >
<ion-slides pager>
    <ion-slide *ngFor="let element of list">
        <img src="{{element.image_path}}"/>
    </ion-slide>
</ion-slides>

您还需要填充列表数组。

Ionic2

1 个答案: