Question

我正在使用离子幻灯片：

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

我想用子弹分页：

工作正常，但现在我有：

标题幻灯片
此标题的5-6张幻灯片
比另一个标题幻灯片
此标题的5-6张幻灯片
ETC

我想要的只是标题页上的子弹。

有人知道我怎么能做到这一点？感谢

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';
        }
    }
}

要调用此功能，您可以使用以下生命周期/ 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>

如何仅使用具有离子和分页的幻灯片？

1 个答案: