jquery mobile下正确地初始化swiper

我遇到奇怪的问题
当我在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'
    });

先贴出结论帮助同样问题的人,更深入原因,待研究。

阅读 6.1k
1 个回答
新手上路,请多包涵
var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
                             observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swipe
});

作者: https://segmentfault.com/a/1190000002962202

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏