Swiper 是一個開源免費的移動觸摸插件。
在使用中遇到這樣一個問題,記錄一下。
page 間切換效果 使用 fade 的時候,如果每個頁面的大小不一樣, 比如第一個頁面全屏, 第二個頁面比第一個小, 那么切換到第二頁的時候, 第一頁的內容還可以看到。
還有,使用 fade
過度方法,onSlideChangeEnd
回調偶爾觸發,偶爾不觸發。 因此使用 onTransitionEnd;
解決方案:
- 添加 fade:{crossFade:true}
- 切換之后效果, 使用 onSlideChangeEnd(page切換后觸發) 會偶爾不觸發, 請使用 onTransitionEnd(過度效果結束觸發)
var mySwiper = new Swiper('.swiper-container',{
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', effect: 'fade',
// tips fade: { crossFade: true, }, onTransitionEnd: function (swiper) { console.info("頁面跳轉到第:", swiper.activeIndex, " 頁") } })