我遇到奇怪的问题:
当我在jquery mobile下使用如下的方式初始化时
$(document).on('pagebeforecreate', '#index-page', function(){
var moreProductSwiper = new Swiper('#more-product-block', {
direction: 'horizontal',
loop: true,
slidesPerView: 'auto',
loopedSlides: 4,
autoHeight: true,
autoplay: 2000,
pagination: '.swiper-pagination'
});
无奈地发现,产生的轮播图时而正常运行,时而不行,无规律可言,无法排查错误。后来参考 http://stackoverflow.com/questions/16496078/swiper-not-working-in-jquery-mobile 后得知,swiper只有在已知宽高的情况下才能正常正常,而jquery mobile只有pageshow
事件才能确保宽高。所以修改如下:
$(document).on('pageshow', '#index-page', function(){
var moreProductSwiper = new Swiper('#more-product-block', {
direction: 'horizontal',
loop: true,
slidesPerView: 'auto',
loopedSlides: 4,
autoHeight: true,
autoplay: 2000,
pagination: '.swiper-pagination'
});
先贴出结论帮助同样问题的人,更深入原因,待研究。
作者: https://segmentfault.com/a/1190000002962202