博客

Swiper使用遇到的问题

字数243


阅读1


评论0


喜欢0

时间：2016-08-09 07:51:07

作者: zhongxia

地址：

http://www.jianshu.com/p/5d2986fa6072

Swiper

是一个开源免费的移动触摸插件。

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

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

Paste_Image.png

还有，使用

fade

过度方法，

onSlideChangeEnd

回调偶尔触发，偶尔不触发。 因此使用

onTransitionEnd


解决方案：

1. 添加 fade:{crossFade:true}
2. 
   切换之后效果， 使用 onSlideChangeEnd（page切换后触发） 会偶尔不触发， 请使用 onTransitionEnd（过度效果结束触发）
   

window.galleryTop = new Swiper('.gallery-top', { 
autoplayStopOnLast: true, 
nextButton: '.swiper-button-next', 
prevButton: '.swiper-button-prev', 
effect: 'fade', 
fade: { crossFade: true, }, 
onTransitionEnd: function (swiper) { 
console.info("页面跳转到第:", swiper.activeIndex, " 页") 
} })