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

论#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屏就滑动不了的解决办法。原文参考：
http://segmentfault.com/a/1190000002962202

动态模板中 swiper 划不动问题

是底部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;  
       }