动态内容的危险刷单问题

我正在用ajax动态加载内容的容器上应用idangerous滑动器滚动条插件，我在ajax调用后初始化了该插件，问题是在调整浏览器大小之前滚动不起作用。我用静态内容测试过它，它工作得很好，不需要调整窗口大小，但一旦我切换到动态内容，滚动就无法工作——我调整了浏览器的大小。

以下是我如何初始化插件

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>

刷卡器容器高度为100%

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

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

这个修复程序在另一个插件中提到过，当我用这个刷卡器插件尝试它时，它起了作用。这与插件没有意识到DOM发生的更改有关。

由于.reInit不再是一个函数，Swiper文档中已更新以进行更改。

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

我对Swiper 3.x的修复（我相信上面涵盖了2.x）

function fixSwiperForIE(swiper) {
    setTimeout(function () {
        swiper.onResize();
    });
}

我有一个无JS的解决方案。

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

.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%;
}

因此，这种方法也可以像图像那样响应任何div大小。使用其宽度的锁定纵横比缩放其高度。

神奇的是，浏览器将margin/padding%值视为元素宽度的百分比，即使您正在填充所述元素的顶部或底部。

希望这能有所帮助！

我只是想补充一点，我也很难让Swiper通过ajax处理动态加载的内容。很明显，这是因为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
  });

我希望这能帮助到一些需要帮助的人！

刷卡器3.4.2

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

.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

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
});

如果您的slipperjs幻灯片中有动态变化的图像，请在配置对象中使用observer: true。

this.config = {
  zoom: false,
  slidesPerView: slidesPerView,
  initialSlide: 12,
  centeredSlides: true,
  spaceBetween: 8,
  scrollbar: false,
  navigation: false,
  pagination: false,
  watchOverflow: true,
  mousewheel: true,
  observer: true, // <--------------------------add this
};

根据文件：observer: true-设置为true可启用Swiper及其元件上的突变观测器。在这种情况下，如果您更改Swiper的样式（如隐藏/显示）或修改其子元素（如添加/删除幻灯片），Swiper每次都会更新（重新初始化）https://swiperjs.com/api/

我遇到了同样的问题，我尝试了几种解决方案，我可以访问我使用的swipper实例"update（）"但它对我的用例不起作用，我还没有尝试过"；观察者网：真的；config，但在初始化我已经添加到父组件an"上的表示组件之前，我使用了一种不同的方法；ng容器"；标记，以验证组件在信息可用之前不会进行渲染，例如：

<ng-container *ngIf="data?.items" >
    <carousel-component [items]="data?.items"></table-component>
</ng-container>

通过这种方式，我确保在我完全确定数据可用后，我将初始化组件，然后我以这种方式呈现组件——你不会因为转盘无法识别日常内容的问题而运行，。

虽然这种方法在我的用例中有效，因为我只加载一次信息，但我建议如果你的情况是在某个时间段内更改图像；观察者网：真的；选项，这听起来可能很明显，我的解决方案，但有很多angular的初学者不知道这种解决方案，希望它能帮助像它为我做的那样的人！。

对于响应式设计，我调用以下方法resizeFix

    function reinitSwiper(swiper) {
       swiper.resizeFix(true)
    }

刷卡器3.4.2

相关内容

最新更新

热门标签：