javascript 动态内容的危险刷卡问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17513479/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
idangerous swiper issue with dynamic content
提问by Yasmine
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.
我正在一个容器上应用 idangerous swiper 滚动条插件，其内容是用 ajax 动态加载的，我在 ajax 调用后初始化插件，问题是在我调整浏览器大小之前滚动不起作用。我已经用静态内容对其进行了测试，它工作正常，无需调整窗口大小，但是一旦我切换到动态内容，滚动将不起作用，我调整了浏览器的大小。
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
}
});
here's the html
这是 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 is 100%
swiper-container 高度为 100%
采纳答案by Yasmine
I found the solution, I added this function which I call after first initializing the plugin
我找到了解决方案，我在第一次初始化插件后添加了这个函数
function reinitSwiper(swiper) {
setTimeout(function () {
swiper.reInit();
}, 500);
}
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.
另一个插件中提到了此修复程序，当我使用此 swiper 插件尝试它时，它起作用了。这与插件不知道 DOM 发生的变化有关。
回答by Tim Gardner
I've got a no-JS solution.
我有一个没有 JS 的解决方案。
HTML
HTML
<div class="responsive-swiper-holder">
<div class="responsive-swiper-shiv"></div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div><!-- .swiper-container -->
</div><!-- .responsive-swiper-holder -->
CSS
CSS
.responsive-swiper-holder {
position: relative;
}
.responsive-swiper-shiv {
padding-top: 31.25%;
}
.swiper-container {
position: absolute;
height: 100%;
width: 100%;
top: 0;
}
.swiper-wrapper, .swiper-slide {
height: 100%;
}
Consequently this method will also work for making any div size responsively the way an image would. Scaling it's height with a locked aspect ratio of it's width.
因此，此方法也适用于以图像的方式响应地制作任何 div 大小。使用其宽度的锁定纵横比缩放它的高度。
The magic is that browsers treat margin/padding % values as a percentage of the width of the element even if you are padding the top or bottom of said element.
神奇的是浏览器将边距/填充百分比值视为元素宽度的百分比，即使您正在填充所述元素的顶部或底部。
Hope this helps!
希望这可以帮助！
回答by David Boyd
My fix for Swiper 3.x (I believe the above covers 2.x)
我对 Swiper 3.x 的修复（我相信以上涵盖了 2.x）
function fixSwiperForIE(swiper) {
setTimeout(function () {
swiper.onResize();
});
}
回答by Jay Lane
Updated for Change in Swiper documentation since .reInit is no longer a function.
更新了 Swiper 文档中的更改，因为 .reInit 不再是一个函数。
function reinitSwiper(swiper) {
setTimeout(function () {
swiper.update();
}, 500);
}
回答by NoobishPro
I just wanted to add that I also had trouble getting Swiper to work with dynamically loaded content through ajax. This is quite obviously because the content wasn't loaded yet when Swiper was intiated. I solved this by using swiper's own appending function instead of my own. This was on version 3.3.1, and it fixed it for me without needing to use setTimeout()or anything!
我只是想补充一点，我也无法让 Swiper 通过ajax. 这很明显是因为在启动 Swiper 时内容尚未加载。我通过使用 swiper 自己的附加函数而不是我自己的函数解决了这个问题。这是版本 3.3.1，它为我修复了它而无需使用setTimeout()或任何东西！
//quick and dirty creation of html to append
var imgHTML = "";
$.each(imgArray, function (i, url) {
imgHTML += '<div class="swiper-slide"><img src="' + url + '" alt=""/></div>';
});
//initiate swiper
var mySwiper = new Swiper('.swiper-container', {
// Optional parameters
loop: true,
autoHeight: true
});
mySwiper.appendSlide(imgHTML); //append the images
mySwiper.update(); //update swiper so it redoes the bindings
});
I hope this helps some people in need!
我希望这可以帮助一些有需要的人！
回答by hanize
swiper 3.4.2
刷卡器 3.4.2
HTML
HTML
<div class="swiper-container">
<div class="swiper-wrapper" style="height: auto">
<div class="swiper-slide"><img src="" width="100%"></div>
<div class="swiper-slide"><img src="" width="100%"></div>
<div class="swiper-slide"><img src="" width="100%"></div>
<div class="swiper-slide"><img src="" width="100%"></div>
<div class="swiper-slide"><img src="" width="100%"></div>
</div>
<div class="swiper-pagination"></div>
</div>
CSS
CSS
.swiper-container {
width: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-pagination-bullet {
width: 10px;
height: 10px;
text-align: center;
line-height: 10px;
font-size: 12px;
color:#000;
opacity: 1;
background: rgba(255, 255, 255, 0.2);
}
.swiper-pagination-bullet-active {
color:#fff;
background: #000000;
}
javascript
javascript
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
slidesPerView: 1,
spaceBetween: 0,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false,
loop: true,
autoHeight: true
});
回答by Abood Sy
For responsive design i call the following method resizeFix
对于响应式设计，我调用以下方法 resizeFix
function reinitSwiper(swiper) {
swiper.resizeFix(true)
}
