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