动态内容的idangerous swiper问题 [英] idangerous swiper issue with dynamic content

问题描述

我在内容动态加载ajax的容器上应用了idangerous swiper滚动条插件，我在ajax调用后初始化插件，问题是滚动不起作用，直到我调整浏览器大小。我已经使用静态内容对其进行了测试，它工作正常，无需调整窗口大小，但一旦切换到动态内容，滚动将无法工作单元我调整浏览器大小。

I am applying the idangerous swiper scrollbar plugin on a container whose content is dynamically loaded with ajax, I initialize the plugin after the ajax call, the issue is that the scroll doesn't work until I resize the browser. I have tested it with static content it's working fine, no need to resize the window but once I switch to dynamic content, the scroll won't work unit I resize the browser.

以下是初始化插件的方法

Here's how am initializing the plugin

var mySwiper = new Swiper('.swiper-container', {
        scrollContainer: true,
        mousewheelControl: true,
        mode: 'vertical',            
        scrollbar: {
            container: '.swiper-scrollbar',
            hide: true,
            draggable: false
        }
    });  

这里是html

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="searchList">
                //here's the dynamic content being loaded (a list of div elements)
            </div>
        </div>
    </div>
    <div class="swiper-scrollbar">
    </div>
</div>

swiper-container height是100％

swiper-container height is 100%

推荐答案

我找到了解决方案，我添加了这个函数，我在第一次初始化插件后调用了这个函数

I found the solution, I added this function which I call after first initializing the plugin

function reinitSwiper(swiper) {
  setTimeout(function () {
   swiper.reInit();
  }, 500);
}

此修补程序在另一个插件中提及，当我尝试使用此swiper插件时有效。它与插件有关，不知道DOM发生的变化。

This fix was mentioned in another plugin and when I tried it with this swiper plugin it worked. It has something to do with the plugin not aware of the change that occurred to the DOM.

这篇关于动态内容的idangerous swiper问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！