解决 Swiper.4.x.js 无法动态加载数据无法渲染 pagination 问题

最新推荐文章于 2023-12-07 18:15:31 发布

Mr · Wu

最新推荐文章于 2023-12-07 18:15:31 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery 文章标签：轮播图插件 swiper swiper.js swiper 动态数据 swiper pagination

本文链接：https://blog.youkuaiyun.com/wwp_1/article/details/94436581

JQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍在移动端项目中使用Swiper轮播图插件版本4.2.0与3.x处理动态数据加载的方法。文章详细阐述了如何在数据动态获取后初始化Swiper，包括设置observer系列属性来监听DOM变化，以及解决pagination渲染问题的方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

昨天公司的一个产品需要添加轮播图，选用了swiper轮播图插件，用的是swiper 的 4.2.0 版本；

因为数据是通过 ajax 动态获取的，并且涉及到的多个模块切换都需要swiper轮播，所以在初始化 swiper 的时候需要加上 observer 系列属性：

<!-- HTML 部分 -->
<div class="bannerClass"></div>

    $.getJSON(url, function(data) {

        $('.bannerClass').html('').html(TmplUtils.getBannerListTmpl(data.datas)) // 填充 swiper 的dom 结构

        initBannerAnimate(true); // 初始化swiper
    })

    var bannerSwiper; 
    function initBannerAnimate(isLoop) { // 因为是移动端项目，所以并没有加左右箭头，有需要可自行加上
    	bannerSwiper = new Swiper('.swiper-container', {
            pagination: {
                el:'.swiper-pagination'   
            },
            loop: isLoop,
            observer: true, // 监听动态加载 dom 结构
            observeParents: true,
            observeSlideChildren: true,
            autoplay: {
                delay: 2000,
                disableOnInteraction: false // 保证在手动滑动轮播图后能够自动滑动
            }
        });
    }

注意点： 1、请求完数据后在渲染swiper的dom结构的时候，我这里是把整个 swiper-container 都重新渲染，而不是只把 swiper-slider 添加到 swiper-wrapper中；

2、ajax 请求完数据并渲染完dom结构，需要整体初始化一下swiper；

上面的代码能够显示轮播图，并在多个模块之间切换能够正常工作，但有一个问题，pagination 并不能渲染；试了很多办法之后，无果。最后推荐使用 swiper 3.x （下载地址：https://pan.baidu.com/s/1kVBLmmF）的版本，具体代码实现如下：

    var bannerSwiper;
    function initBannerAnimate(isLoop) {
    	bannerSwiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            loop: isLoop,
            observer: true,
            observeParents:true,
            autoplay: 2000,
            autoplayDisableOnInteraction: false // 保证在手动滑动轮播图后能够自动滑动
        });
    }

上面代码和4.x版本动态数据的效果一样，并能够实现 pagination 的渲染。

THE END