Ionic4 React框架-IonSlides没有填充分页-为什么未定义params.pagination.el？

Question

我有一个使用Ionic4的React构建的简单Webapp。应用程序中的两个“部分”由全屏IonSlides和分页（pager={true}）组成。

在除iPad Air Safari之外的所有浏览器中，分页均正确填充，并且出现了分页项目符号。但是，在iPad Safari中，没有一个空的分页节点（没有填充项目符号元素）。

我希望这是一种竞赛情况，但我无法查明导致这种情况发生的位置或原因。当我调试和跟踪幻灯片组件的属性（这是Swiper JS的实例）时，我看到swiper.params.pagination.el是未定义的。

任何人都可以帮助我弄清楚为什么未定义和/或如何更正吗？

我曾尝试在componentDidMount之后动态添加幻灯片。我试过在swiper.update()中以及在组件进入视图时调用componentDidMount。我尝试过在滑动器中调用swiper.pagination.update()和其他重置/重新更新方法。

这是我的精简/相关代码。

在视图类中，声明滑块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中。在所有其他浏览器中，分页元素包含相应的分页子弹节点。

Answer 1

好吧，我一直坚持下去，我有一个可行的解决方案...不确定它是否在解决根本问题，因为我仍然无法弄清楚潜在问题是什么...但是，在此处发布解决方案万一有一天对其他人有用...

我最终为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) => {});