Swiper.js使用遇到的问题总结onSlideChangeEnd回调偶尔触发，偶尔不触发等

系统管理员 2022-03-16 11:12 441阅读 0赞

swiper 是一个开源免费的移动触摸插件。swiper3.0版本使用。

onSlideChangeEnd回调偶尔不触发，或者是pc端触发，但是手机端不触发

在使用中遇到这样一个问题，记录一下。

page 间切换效果 使用 fade 的时候，如果每个页面的大小不一样， 比如第一个页面全屏， 第二个页面比第一个小， 那么切换到第二页的时候， 第一页的内容还可以看到。

还有，使用 `fade` 过度方法，`onSlideChangeEnd` 回调偶尔触发，偶尔不触发。 因此使用 `onTransitionEnd；`

解决方案：

1. 添加 fade:\{crossFade:true\}
2. 切换之后效果， 使用 onSlideChangeEnd（page切换后触发） 会偶尔不触发， 请使用 onTransitionEnd（过度效果结束触发） 
 
 <table> 
 <tbody> 
 <tr> 
 <td> &nbsp; </td> 
 <td> <code>var</code>&nbsp;<code>mySwiper =&nbsp;</code><code>new</code>&nbsp;<code>Swiper(</code><code>'.swiper-container'</code><code>,{&lt;br&gt;　　pagination:&nbsp;</code><code>'.swiper-pagination'</code><code>,&lt;br&gt;&nbsp;&nbsp; nextButton:&nbsp;</code><code>'.swiper-button-next'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;</code><code>prevButton:&nbsp;</code><code>'.swiper-button-prev'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;</code><code>effect:&nbsp;</code><code>'fade'</code><code>,&lt;br&gt;</code><code>// tips</code> <code>&nbsp;&nbsp;&nbsp;</code><code>fade: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>crossFade:&nbsp;</code><code>true</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;</code><code>onTransitionEnd:&nbsp;</code><code>function</code>&nbsp;<code>(swiper) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.info(</code><code>"页面跳转到第:"</code><code>, swiper.activeIndex,&nbsp;</code><code>" 页"</code><code>)</code> <code>&nbsp;&nbsp;&nbsp;</code><code>}</code> </td> 
 </tr> 
 </tbody> 
 </table>