当页面上有多个滑块时，swiper.destroy()无法工作
当页面上有多个滑块时，swiper.destroy()无法工作
提问于 2022-06-24 17:59:08
我在同一个页面中有一组os滑动实例，需要根据屏幕宽度销毁/输入它们：
const mobile = window.matchMedia('(max-width: 575.98px)');
function instantiateGridSlider() {
const sliders = [];
$('.thumbnails-grid').each(function(index, element){
const instance = $(this).data('instance');
sliders[index] = new Swiper(element, {
speed: 500,
spaceBetween: 30,
slidesPerView: 1,
loop: true,
init: false,
pagination: {
el: '.swiper-pagination-' + instance,
type: 'bullets',
clickable: true,
},
});
});
return sliders;
}
function initGridSlider() {
if ($('.thumbnails-grid').length == 0) {
return;
}
const gridSliders = instantiateGridSlider();
for (let i = 0; i < gridSliders.length; i++) {
if (mobile.matches) {
gridSliders[i].init(gridSliders[i].el);
} else {
gridSliders[i].destroy(true, true);
}
}
}
window.addEventListener('resize', function() {
initGridSlider();
});
initGridSlider();但是当我调整窗口的大小以破坏滑块时，我会得到这个错误：
Uncaught TypeError:无法读取Swiper.loopDestroy (loopDestroy.js:6:1) at Swiper.destroy (core-class.js:545:1)的未定义属性( initGridSlider (slider.js:84:1) at slider.js:90:1
)
回答 1
Stack Overflow用户
发布于 2022-07-12 15:56:34
在您的情况下-破坏可能运行不止一次(在调整大小)-所以设置deleteInstance为false (由失聪为真)。
swiper.destroy(deleteInstance, cleanStyles)**否则，在第二个调整大小的事件中：
Uncaught TypeError: Cannot read properties of null (reading 'destroy') 下一次检查您的情况，--例如，如果您没有在滑块中插入该滑块并单击“破坏”，则不应该发生任何事情。
上一个性能问题-调整大小事件甚至可以运行100次(您的代码重新安装滑动器100倍X滑块数量)。记住这一点。最好只检查负载上的状态：Do something if screen width is less than 960 px
代码段
你没有给出完整的代码示例。这里是"hello“示例(单击破坏/init)。
let swiper_setting = {
spaceBetween: 100,
pagination: {
el: '.swiper-pagination',
}
}
var slider_nodes = document.querySelectorAll('.thumbnails-grid');
let sliders = [];
function loadSwiper(swiper_setting){
[].forEach.call(slider_nodes, function(slider_node) {
// do whatever
let swiper = new Swiper(slider_node, swiper_setting);
sliders.push(swiper);
});
return sliders;
}
loadSwiper(swiper_setting);
$( "#destroy" ).click(function() {
$(".swiper.thumbnails-grid").each(function(i){
this.swiper.destroy(false);
});
});
$( "#init" ).click(function() {
loadSwiper(swiper_setting);
});
addEventListener('resize', (event) => {
console.log("resize");
});html,
body {
background: #403F6B;
}
.swiper {
width: 100%;
height: 100%;
position: relative;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
height: 200px!important;
/* Center slide text vertically */
display: flex;
margin-bottom: 40px!important;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}<link href="https://unpkg.com/swiper@8/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<button id="destroy">Destroy All</button>
<button id="init">Init All</button>
<!-- Slider main container -->
<div class="swiper thumbnails-grid" slider_one>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper thumbnails-grid" slider_two>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72747788
复制相关文章
相似问题
腾讯云开发者
