使用swiper进行轮播效果,出现了一个奇怪的问题,不知是不是bug,
多次点击切换button之后 ,滑动轮播图,底下的分页小点点就不动了?
你在createSwiper()函数中,用一个局部变量"var swiper = Swiper()"去创建一个Swiper实例后,再次调用createSwiper()函数时,没有对之前创建的实例进行释放,从而出现问题。
刚才测试了一下,你的方法不清楚会不会造成内存泄漏,但是Pagination在"loop: true"时,会出现计算错误,导致你所谓的bug。
修改如下:
$(function() {
$("button").click(function() {
var index = $(this).index();
var swiper;
$("body").find('.wrap-container').eq(index).show().siblings('.wrap-container').hide();
if(swiper !== undefined) {
swiper.destroy();
}
swiper = createSwiper(1 + index);
});
});
function createSwiper(index) {
var swiper = new Swiper('.swiper' + index, {
pagination: '.pagination' + index,
paginationClickable: true,
loop: true,
paginationBulletRender: function(index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
}
});
return swiper;
}
======================
目测真的是Swiper插件本身存在的Bug,对同一个swiper重复进行初始化后,Pagination就无法使用了,楼主有空可以在官网那里反馈一下。
暂时想到一个解决方案是用两个全局变量来保存两个Swiper的初始化状态,然后根据对应的index和swiper状态来判断是否进行初始化,如果您有更好的解决方案,麻烦也告知一下,谢谢!
$(function(){
var swiper1, swiper2;
$("button").click(function(){
var index = $(this).index();
$("body").find('.wrap-container').eq(index).show().siblings('.wrap-container').hide();
if(index === 0 && swiper1 === undefined) {
swiper1 = createSwiper(1);
} else if(index === 1 && swiper2 === undefined) {
swiper2 = createSwiper(2);
}
});
});
function createSwiper(index){
var swiper = new Swiper('.swiper'+index, {
pagination: '.pagination'+index,
paginationClickable: true,
loop:true,
paginationBulletRender: function (index, className) {
return '<span class="' + className + '">'+(index+1)+'</span>';
}
});
return swiper;
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。