我最近用Ionic Framework做了一个应用程序,一切都很顺利,但我有一个相当小的部分,但恼人的问题。
我已经实现了swiperJS,它工作正常,现在我想在ion-title对象中显示你所在幻灯片的当前索引。我已经把索引很好地发送到控制台,并把它放入一个变量中,但我认为应该工作的没有。它只是不更新标题,它只接受我给它的初始数字。
register.page.ts
import { Component, OnInit } from '@angular/core';
import { SwiperOptions } from 'swiper';
@Component({
selector: 'app-register',
templateUrl: './register.page.html',
styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {
private slides: any;
slideIndex: number;
swiperConfig: SwiperOptions = {
slidesPerView: 1,
spaceBetween: 50,
navigation: false
};
constructor() {
this.slideIndex = 1;
}
ngOnInit() {
}
setSwiperInstance(swiper: any) {
this.slides = swiper;
}
onSlideChange(){
this.slideIndex = this.slides.activeIndex + 1;
console.log(this.slideIndex);
}
}
register.page.html
<ion-header color="primary">
<ion-toolbar>
<ion-title class="ion-text-center">Step {{slideIndex}}</ion-title>
<div class="wizardProgress ion-text-center"></div>
</ion-toolbar>
</ion-header>
<ion-content>
<swiper color="primary" (swiper)="setSwiperInstance($event)" (slideChange)="onSlideChange()" [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>
<ng-template swiperSlide>Slide 5</ng-template>
<ng-template swiperSlide>Slide 6</ng-template>
<ng-template swiperSlide>Slide 7</ng-template>
</swiper>
</ion-content>
我试过把整个标题替换成另一个问题,我也试过把它设置成一个字符串。正如我提到的,它应该改变标题说'第一步','第二步'等,但它只是停留在'第一步',即使幻灯片的变化和变量(slideIndex)的变化,我可以看到从控制台输出。
你知道为什么它不会改变吗?我可以看到背景中的变量改变了,但它就是不呈现它。
1条答案
按热度按时间bxfogqkk1#
您可以使用
activeIndexChange
事件并通过swiper对象恢复activeIndex
。您的HTML:
您的.ts:
如果仍然不更新,尝试使用变化检测器:
在
this.slideIndex = swiper.activeIndex
之后调用: