我怎样才能使用带有离子和分页的幻灯片，只有某些页面？

Question

我正在使用离子载玻片：

https://ionicframework.com/docs/api/components/slides/Slides/

我想对项目符号使用分页：

工作正常，但现在我有：

一张标题幻灯片
这个标题超过 5-6 张幻灯片
比另一个标题幻灯片
这个标题超过 5-6 张幻灯片
等

我只想要标题页的项目符号。

有人知道我该怎么做吗？谢谢

Answer 1

这就是我会做的。基本上我会 定义标题页 像这样：

private titleSlides = {
    "1": "title",
    "5": "title",
    "8": "title"
};

然后我写了这个函数来隐藏不是标题页的项目符号：

@ViewChild(Slides) private slides: Slides;

private changePagination () : void {
    // get active index
    let index = this.slides.getActiveIndex();
    // get the pager bullets (maybe need to be selected different, when multiple slides on one page)
    let bullets = document.getElementsByClassName('swiper-pagination-bullet');

    for (let i = 0; i < bullets.length; i++) {
        if (index == 0) {
            if (this.titleSlides[i]) {
                (bullets[i] as HTMLElement).style.display = 'inline-block';
            } else {
                (bullets[i] as HTMLElement).style.display = 'none';
            }
        } else {
            (bullets[i] as HTMLElement).style.display = 'none';
        }
    }
}

要调用此函数，您可以使用以下 lifecycle/onChange 函数:

ionSlideDidChange() {
    this.changePagination();
}

ngAfterViewChecked () {
    this.changePagination();
}

最后是你的 html:

<ion-slides pager="true" (ionSlideDidChange)="ionSlideDidChange()">
    <ion-slide>
        Global
    </ion-slide>
    <ion-slide>
        Title
    </ion-slide>
    <ion-slide>
        Slide 1
    </ion-slide>
    <ion-slide>
        Slide 2
    </ion-slide>
    <ion-slide>
        Slide 3
    </ion-slide>
    <ion-slide>
        Title
    </ion-slide>
    <ion-slide>
        Slide 1
    </ion-slide>
    <ion-slide>
        Slide 2
    </ion-slide>
    <ion-slide>
        Title
    </ion-slide>
    <ion-slide>
        Slide 1
    </ion-slide>
</ion-slides>

我怎样才能使用带有离子和分页的幻灯片，只有某些页面？

How can I use slides with ionic and pagination only certain pages?

angular

ionic-framework

pagination

swiper