1

我正在尝试实现一个刷卡器。我有一个使用 Angular Universal 的应用程序。当我最初加载我的应用程序时，刷卡器会初始化，但有一个错误让我左右滑动太远。如果我尝试滑动太远，它不仅会弹回。

当我使用刷卡器离开页面然后返回时，刷卡器按预期工作。我假设这与服务器端渲染有关。有没有其他人遇到过这个问题？

这是我的配置：

var sortFilterSwiper = new Swiper("#sortSwiperMobile", {
spaceBetween: 0,
slidesPerView: 'auto',
centeredSlides: false

});

就像我说的，它似乎在浏览器应用程序中运行良好，但我无法让它在服务器上运行。

4

2 回答 2

1

将 swiper 与 Angular Universal Server Side Rendering 一起使用时，我遇到了同样的错误，我安装了ngx-swiper-wrapper包，它运行良好，没有任何错误

参考包：https://www.npmjs.com/package/ngx-swiper-wrapper

于 2021-04-02T07:21:04.700 回答
1

在我的项目中也是如此，但我已经修复了这样的问题：

import { EventReplayer } from 'preboot';


ngAfterViewInit(): void {
 if (isPlatformBrowser(this.platformId)) {
  this.swipeConfig = {
    direction: 'horizontal',
    initialSlide: 0,
    updateOnWindowResize: true,
    preloadImages: false
  };
  this.eventReplayer.replayAll();
  this.cd.markForCheck();
}

}

我希望这会对你有所帮助。

于 2021-03-30T18:56:53.460 回答