Платформа Ionic4 React - IonSlides не заполняет нумерацию страниц - почему params.pagination.el не определен? - PullRequest
Новая
       105

Платформа Ionic4 React - IonSlides не заполняет нумерацию страниц - почему params.pagination.el не определен?

0 голосов
/ 27 сентября 2019

У меня есть простое веб-приложение, созданное с помощью сборки React Ionic4.Два «раздела» в приложении состоят из полноэкранных IonSlides с нумерацией страниц (pager={true}).

Во всех браузерах, кроме iPad Air Safari, нумерация страниц выполняется правильно и появляются маркеры нумерации страниц.Однако в iPad Safari есть пустой узел разбиения на страницы (элементы маркера не заполнены).

Я ожидаю, что это состояние гонки, но я не могу точно определить, где или что вызывает это.Когда я отлаживаю и отслеживаю свойства компонента слайдов (который является экземпляром Swiper JS), я вижу, что swiper.params.pagination.el не определено.

Может кто-нибудь помочь мне выяснить, почему оно не определено и / или как исправить?

Я пытался динамически добавлять слайды после componentDidMount.Я попытался вызвать swiper.update() в componentDidMount, а также когда компонент входит в представление.Я попытался вызвать swiper.pagination.update() и другие методы сброса / повторного обновления в swiper.

Вот мой урезанный / соответствующий код.

В классе представления объявитеползунок ref -> 

private slider = createRef<any>();

В компоненте render () -> 

<IonSlides ref={this.slider} pager={true}>
    <IonSlide className="twocol">
        content
    </IonSlide>
    <IonSlide className="twocol">
        content
    </IonSlide>
    <IonSlide className="twocol">
        content
    </IonSlide>
    <IonSlide className="twocol">
        content
    </IonSlide>
    <IonSlide className="twocol">
        content
    </IonSlide>
</IonSlides>

В ionViewDidEnter кое-что из того, что я пробовал (закомментировано только для справки)-> 

ionViewDidEnter() {
    this.slider.current.getSwiper().then((swiper:any) => {
    // swiper.init();
    // swiper.pagination.type='bullets';
    // swiper.pagination.el='.swiper-pagination';
    // swiper.pagination.init();
    // swiper.pagination.render();
    // swiper.pagination.update();
    swiper.update();
    swiper.slideTo(0,0);
    }).catch((err:any) => {});
}

Я не получаю сообщений об ошибках.Пагинация - это просто пустой узел.Только в iPad Safari.Во всех других браузерах элемент пагинации содержит соответствующие узлы пагинации.

1 Ответ

0 голосов
/ 27 сентября 2019

Хорошо, я продолжил, и у меня есть решение, которое работает ... не уверен, что оно действительно решает основную проблему, потому что я все еще не могу понять, что является основной проблемой ... Но, опубликовав решение здесьна случай, если это когда-нибудь пригодится другим ...

В итоге я присвоил значение params.pagination.el, а затем инициализировал, рендерил и обновлял нумерацию страниц через экземпляр swiper для его повторного создания.Используемый код: 

this.slider.current.getSwiper().then((swiper:any) => {
     swiper.params.pagination.el = '.swiper-pagination';
     swiper.pagination.init();
     swiper.pagination.render();
     swiper.pagination.update();
     swiper.update();
}).catch((err:any) => {});
...