论#POST异步加载的tab切换内容 swiper切换不起效果以及底部pagination 失效的解决办法#

论#POST异步加载的tab切换内容 swiper切换不起效果以及底部pagination 失效的解决办法#

function hdp_swiper(){var swiper = new Swiper('.hdp-container', {        pagination: '.swiper-pagination',        paginationClickable: true,        observer:true,//修改swiper自己或子元素时，自动初始化swiper    observeParents:true,//修改swiper的父元素时，自动初始化swiper    onSlideChangeEnd: function(swiper){    swiper.update();    }    });};

这2个参数：observer:true,//修改swiper自己或子元素时，自动初始化swiper
                      observeParents:true,//修改swiper的父元素时，自动初始化swiper

就是在swiper滑动的时候滑动到第3屏就滑动不了的解决办法。原文参考：

动态模板中 swiper 划不动问题

http://segmentfault.com/a/1190000002962202

此参数  onSlideChangeEnd: function(swiper){
            swiper.update();
        }

是底部pagination 失效的解决办法：意思是在滑动结束的时候，再重新更新或者刷新下swiper。

这2个bug整整花费了近乎半天的时间。       

除了解决标题的问题外，之前做弹窗还遇到过这种问题：（用的swiper3.0版本，后面会说到swiper2.0，因为3.0已经不兼容ie8了，而且本次操作的平台是pc，非移动端）

弹窗内容有tab切换，有2个swiper分别在tab切换的内容下，当点击触发弹窗的按钮后，显示弹窗内容，但不管怎么tab切换，swiper的滑动事件都不起效果。

一开始我的错误代码就是这样的：

    myswiper = new Swiper('.TabChangeIos', {         pagination: '.paginationios',         paginationClickable: true,         autoplay: 3000,         grabCursor: true,         loop : true,         speed : speed,     });

这种格式是构造函数调用swiper插件，传入.TabChangeIos 这个DOM对象，然后传入后面的参数，这个也是swiper的api最基本的形式。表面上是没什么问题，但引入第二个swip的时候，特别还是显示一个，要隐藏另外一个情况下就会出问题。另外一个错误代码如下：

    myswiper = new Swiper('.TabChangeAnd', {         pagination: '.paginationios',         paginationClickable: true,         autoplay: 3000,         grabCursor: true,         loop : true,         speed : speed,     });

只是传入的DOM对象不一样，其他都是一样的。

正确的做法是：将调用构造函数的返回结果包成一个函数，在触发弹窗显示的时候（这里是点击事件），将函数调用1次就可以了。

 function andSwiper(){     swiper = new Swiper('.TabChangeAnd', {            pagination: '.paginationand',            paginationClickable: true,            autoplay: 3000,            grabCursor: true,            autoplayDisableOnInteraction : false,            loop : true,            speed : speed,            onSlideChangeEnd: function(swiper){            swiper.startAutoplay();             }        });     }    function iosSwiper(){     myswiper = new Swiper('.TabChangeIos', {         pagination: '.paginationios',         paginationClickable: true,         autoplay: 3000,         grabCursor: true,         autoplayDisableOnInteraction : false,         loop : true,         speed : speed,         onSlideChangeEnd: function(swiper){         myswiper.startAutoplay();             }     });   } $(".showBox").click(function(){             iosSwiper();             andSwiper();             }        })

 这种方法适合于，tab切换，和异步post加载

解决完这个bug后，后面还遇到不兼容ie8的问题，所以切换到了swiper2，调用方法都差不多。

暂且先把这个问题的解决办法黏贴上来，因为是我们php同事解决的。

function getBrowserInfo()    {    var agent = navigator.userAgent.toLowerCase() ;    var regStr_ie = /msie [\d.]+;/gi ;    var regStr_ff = /firefox\/[\d.]+/gi    var regStr_chrome = /chrome\/[\d.]+/gi ;    var regStr_saf = /safari\/[\d.]+/gi ;    //IE    if(agent.indexOf("msie") > 0)    {    return 'ie' ;    }    //firefox    if(agent.indexOf("firefox") > 0)    {    return agent.match(regStr_ff) ;    }    //Chrome    if(agent.indexOf("chrome") > 0)    {    return agent.match(regStr_chrome) ;    }    //Safari    if(agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0)    {    return agent.match(regStr_saf) ;    }    }    var is_ie = getBrowserInfo();    var speed = 800;    if(is_ie == 'ie'){    speed = 3600;       }