使用swiper动态加载数据遇到的坑

最新推荐文章于 2023-07-21 17:03:40 发布

caicai1171523597

最新推荐文章于 2023-07-21 17:03:40 发布

阅读量1.6w

点赞数 10

分类专栏： web前端

本文链接：https://blog.csdn.net/caicai1171523597/article/details/89878218

版权

web前端专栏收录该内容

27 篇文章

订阅专栏

博客指出在实际开发中，Swiper结合动态加载数据做轮播会遇到问题，如多个swiper-slide无间距、滑不动，动态添加属性缺失。怀疑版本问题更新后仍未解决，发现是初始化问题。给出两种解决办法，一是动态获取数据后马上初始化，二是初始化时添加控制属性。

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

使用swiper做轮播官网上的用法都很简单，因为案例的数据是写死在html里的，这样的情况下swiper放在页面的任意位置初始化都可以，但是实际开发中，很多时候轮播的数据我们是动态获取的，所以swiper结合动态加载数据的轮播就发现有坑了。
在页面开始先初始化的swiper，再发送请求动态加载数据然后生成html插入到swiper的容器里，然后发现多个swiper-slide之间没有间距贴在一起，滑不动的问题，按照官方示例生成的swiper-slide在右键审查元素时应该在动态添加上translate，rotate等属性，但是实际没有。
最开始怀疑是不是我引入的swiper不是最新版本，更新到最新版本后问题依然存在，然后想起是初始化的问题。
解决办法一：在动态获取数据后马上对swiper进行初始化。

$.ajax({
    type:"POST",
    url:"",
    dataType:"json",
    async:"false",
    data:{},
    success:function(result){
        if(result){
            for(var i=0;i<result.length;i++){
                 bannerHtml+='<div class="swiper-slide"><a href="'+result[i].banner_url+'"><img src="'+result[i].banner_image+'"></a></div>';
        }
        $(".swiper-wrapper").html(bannerHtml);
        var mySwiper = new Swiper('.swiper-container',{
            autoplay : 5000,
            speed:1000,
            loop: true
        })
    }
})

解决办法二：在swiper初始化的时候，加上下面两个控制属性：

var swiper = new Swiper('.swiper-container', { 
    observer:true,//修改swiper自己或子元素时，自动初始化swiper 
    observeParents:true//修改swiper的父元素时，自动初始化swiper 
});

这样当我们动态添加或删除的数据也能实时滑动了。