有坑,轮播 Loop 模式使用 Swiper9

1,331 阅读3分钟

因为前阵子开发了一个 React 的 轮播功能,遇到了如果需要 文字动态,在Clone项目上需要重置时, 会导致动画无法连贯,所以就想说来看看目前的 Swiper 有没有这个问题。

於事,發現了他已經不使用 Clone 的方式了。

一般情況

1_7qXF3NzsA0FnSKqU8k4sfQ (1).gif

可以看到,一般情况下,该方法类似于实现轮播的一般方法。

遇到需要 Clone 的情況

1_eHaFFqud-Mb3GVHVqEJLTw.gif

我们从aria-label中的信息可以看出,active item被移动到第一个位置,然后序列继续。 对于每一个动作,我们只需要激活 transition-duration 动画。 运动完成后,动画停用,运动控制应锁定,直到运动完成。

但实际上是

// active 5 (is last)  
1 / 5 (-1496 * 0)  
2 / 5 (-1496 * 1)  
3 / 5 (-1496 * 2)  
4 / 5 (-1496 * 3)  
5 / 5 (-1496 * 4)  
  
// click next, active 1  
// then duration 0ms, transform: -4488px,  
// then duration: 900ms, transform: -5984px,  
// move  
2 / 5 (0)  
3 / 5 (-1496px)  
4 / 5 (-2992px)  
5 / 5 (-4488px)  
1 / 5 (-5984px)  
// then duration 0ms  
  
  
// click next, active 2  
// then duration 0ms, transform: -4488px,  
// then duration: 900ms, transform: -5984px,  
3 / 5 (0)  
4 / 5 (-1496px)  
5 / 5 (-2992px)  
1 / 5 (-4488px)  
2 / 5 (-5984px)  
// then duration 0ms

因为速度太快看不出破绽,下面是大概的重现方式

containerEl.style.transform = `translate3d(${-1904}px, 0px, 0px)`;
containerEl.style.transitionDuration = '0ms';
setTimeout(() => {
    containerEl.style.transform = `translate3d(${-3808}px, 0px, 0px)`;
    containerEl.style.transitionDuration = `${this._configurator.setting.moveTime}ms`;
}, 0);

于是补上将下一个目标序列移动到最后一个,然后跳转到上一个位置,再移动到最后一个 排序变了,就变成了判断是最后还是第一个,按顺序判断

可以解决什么问题

我本来以为要循环,必须复制然后立即替换和重置。 通过这样做,我们可以避免与额外复制相关的问题以及轮播项目不同的情况。 每次都需要创建新轮播项目(依照需要复制的数量)。通常是轮播项目中有动态效果时比较容易受到影响

会产生什么问题

1_djAzNr7EbSSCExVz82fd2g.gif

  • 因为改变数组顺序需要重新渲染 (值得思考的是,如果真的改变了数组的顺序,可以考虑是否使用css order来达到同样的效果)

  • 当数量无法整除移動群数时,当数量无法整除移动群数时,顺序切换补间会出现破绽

  • 手动滑动的时候,或者数量不够的时候,很难判断切换顺序是依照 开头还是结尾

  • 第一页指定移动到最后一页的时候,很難瞬間在 動畫移動中切換順序(除非使用 requestAnimationFrame)

到目前为止,使用克隆可能仍然是利大于弊。

替代方案

如果你觉得目前的 swiper 过于复杂,或是 你的需求会产生奇怪的现象,你可以考虑这个库,Loop 模式是使用 Clone 模式

github.com/imagine1025…

说明文档 bear-react-carousel.github.io/docs/why

如果有帮助到你,在帮忙给的 Star 支持,感谢 :)

如果有其他建议,也欢迎交流

参考

Test Not Clone Branch

Swiper carousel design and how loop