网站模板下载

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

作者 swiper 2020-09-23 184

使用 swiper 做轮播官网上的用法都很简单,因为案例的数据是写死在html里的,这样的情况下swiper放在页面的任意位置初始化都可以,但是实际开发中,很多时候轮播的数据我们是动态获取的,所以swiper结合动态加载数据的轮播就发现有坑了。

在页面开始先初始化的swiper,再发送请求动态加载数据然后生成html插入到swiper的容器里,然后发现多个swiper-slide之间没有间距贴在一起,滑不动的问题,按照官方示例生成的swiper-slide在右键审查元素时应该在动态添加上translate,rotate等属性,但是实际没有。

最开始怀疑是不是我引入的swiper不是最新版本,更新到最新版本后问题依然存在,然后想起是初始化的问题。

解决办法一:在动态获取数据后马上对swiper进行初始化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$.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初始化的时候,加上下面两个控制属性:

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

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

分享给朋友 使用 swiper 动态加载数据遇到的坑-好哇网

点击【分享给朋友】生成专属代理二维码,享受推广消费现金奖励!

点击【分享给朋友】生成专属代理二维码,享受推广消费现金奖励!
好哇网 » 使用 swiper 动态加载数据遇到的坑

发表评论

好哇网,累计帮助1000+用户成功建站,为小微企业提供助力!

立刻开启你的建站之旅

留言咨询

现在加入好哇网,注册一个账号