无限滚动加载更多信息后，滑动滑块不起作用

Posted 2023-05-07

【中文标题】无限滚动加载更多信息后，滑动滑块不起作用

【英文标题】：Swiper slider do not work after infinite scroll load more information

【发布时间】：2020-03-03 02:42:25

【问题描述】：

我在主页上使用Swiper slider 使用infinite scroll 来加载有关在Opencart 平台上滚动的更多信息。

当我向下滚动并且无限滚动加载的内容多于 Swiper Slider 箭头不适用于新内容时，问题就来了

我在页脚中初始化 Swiper 以确保在加载主页后会初始化，即使我使用循环执行此操作但仍然是同样的问题

有什么想法可以解决这个问题吗？

刷机

$(".swiper-container").each(function(index, element) 
    var swiper = new Swiper('.swiper-container', 
        slidesPerView: 1,
        loop: true,
        navigation: 
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        ,
        pagination: 
            el: '.swiper-pagination'
        ,
        spaceBetween: 10,
    );
);

无限滚动

 $("#listproduct").addClass("infinitescroll");
 var $container = $('.infinitescroll');

 $container.infinitescroll(
     navSelector: ".pagination",
     nextSelector: ".next-pagination",
     itemSelector: ".product-layout",
     history: 'push',
     loading: 
         msgText: "Loading ....",
     
 ,

更新

我设法使它适用于下一次更改

刷机

var options = 
        slidesPerView: 1,
        loop: true,
        navigation: 
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        ,
        pagination: 
            el: '.swiper-pagination'
        ,
        spaceBetween: 10,
    ,

swiper = new Swiper('.swiper-container', options);

无限

$("#listproduct").addClass("infinitescroll");
var $container = $('.infinitescroll');

 $container.infinitescroll(
 navSelector: ".pagination",
 nextSelector: ".next-pagination",
 itemSelector: ".product-layout",
 history: 'push',
 loading: 
     msgText: "Loading ....",
 
,function()
 swiper = new Swiper('.swiper-container', options);

【问题讨论】：

很高兴你让它工作，但你需要把你的答案放在一个答案中（并接受它），这样这篇文章才能得到解决。

【参考方案1】：

Swiper 在its API 中有一个update 方法：

swiper.update();

您需要在无限滚动load 事件callback 中运行它。可能看起来像这样：

$container.on( 'load.infiniteScroll', function() 
    swiper.update();
);

【讨论】：

不确定我是否做对了，但是当我在初始化后无限滚动 v2 中读取时，我应该调用 function(item) var mySwiper = document.querySelector('.swiper-container').swiper mySwiper 。更新（）; 但仍然无法正常工作

我已经更新了答案。您显示的似乎不是事件回调。

我尝试了新的更新，但即使我在 $container.on 中的 console.log('fine') 仍然无法工作 .... 没有显示在控制台中

我需要查看完整的演示以提供进一步帮助。我猜在黑暗中否则。您可以尝试在其中一个 javascript 游乐场网站上进行设置。

我很高兴你花时间帮助我让你的帖子看起来正确但对我不起作用（看起来破坏在无限滚动的某个地方被称为）无论如何我会投票以防有人需要它并且我用适合我的方式更新我的主题。谢谢

【参考方案2】：

看起来像在无限滚动中的某个地方调用了destroy，并且加载完成后必须重新初始化Swiper，这将适用于v2无限

刷机

var options = 
    slidesPerView: 1,
    loop: true,
    navigation: 
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    ,
    pagination: 
        el: '.swiper-pagination'
    ,
    spaceBetween: 10,
,

swiper = new Swiper('.swiper-container', options);

无限

$("#listproduct").addClass("infinitescroll");
var $container = $('.infinitescroll');

 $container.infinitescroll(
 navSelector: ".pagination",
 nextSelector: ".next-pagination",
 itemSelector: ".product-layout",
 history: 'push',
 loading: 
     msgText: "Loading ....",
 
,function()
 swiper = new Swiper('.swiper-container', options);