论#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;         }