Как я могу использовать слайды с ионной и нумерацией страниц только на определенных страницах?

Я использую ионные слайды:

https://ionicframework.com/docs/api/components/slides/Slides/ < / а>

Я хочу использовать разбиение на страницы с помощью маркера:

введите здесь описание изображения

Это нормально работает, но теперь у меня есть:

  • Заглавный слайд
  • Более 5-6 слайдов для этого заголовка
  • Чем еще один титульный слайд
  • Более 5-6 слайдов для этого заголовка
  • ТАК ДАЛЕЕ

Я хочу иметь пули только для титульных листов.

Кто-нибудь знает, как я могу этого добиться? Спасибо


person anubis    schedule 12.10.2017    source источник
comment
Итак, вы хотите иметь титульный экран с 5-6 маркерами на нем, и когда вы перейдете к следующему титульному экрану, появится 5-6 новых маркеров для следующих страниц. Я вас правильно понял?   -  person Stephan Strate    schedule 17.10.2017
comment
нет, первая страница содержит все маркеры. Но только маркеры для титульных листов. На остальных страницах нет маркеров   -  person anubis    schedule 18.10.2017
comment
Я правда не понимаю, что ты имеешь в виду. Не могли бы вы еще раз описать проблему?   -  person Stephan Strate    schedule 18.10.2017
comment
Пример: у меня есть 15 слайдов: 1.- Глобальный титульный слайд, 2.- Титульный слайд, 3.- слайд, связанный с 2, 4.- слайд, связанный с 2, 5.- слайд, связанный с 2, 6.- Титульный слайд. , 3.- слайд, связанный с 6, 7.- слайд, связанный с 6, 8.- слайд, связанный с 6, 9.- слайд, связанный с 6, 10.- титульный слайд, 11.- слайд, связанный с 10, 12.- слайд, связанный с 10, 13. - слайд, связанный с 10, 14. - слайд, связанный с 10, 15. - слайд, связанный с 10. Затем на глобальной титульной странице я хочу иметь маркеры нумерации страниц, но не 15 маркеров, только маркеры для титульных страниц (2, 6, 10)   -  person anubis    schedule 18.10.2017
comment
Я отредактировал свой ответ.   -  person Stephan Strate    schedule 18.10.2017
comment
Не могли бы вы дать мне отзыв, работает ли он для вас или все еще не решает проблему.   -  person Stephan Strate    schedule 19.10.2017
comment
Я сейчас протестирую и скажу вам, но, как я вижу, вроде хорошо, спасибо   -  person anubis    schedule 20.10.2017
comment
Спасибо за помощь, это именно то, что мне было нужно! Работает отлично!   -  person anubis    schedule 20.10.2017


Ответы (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>
person Stephan Strate    schedule 17.10.2017