美文网首页
使用swiper动态加载数据遇到的坑

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

作者: 宏_4491 | 来源:发表于2020-07-12 23:12 被阅读0次

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

    相关文章

      网友评论

          本文标题:使用swiper动态加载数据遇到的坑

          本文链接:https://www.haomeiwen.com/subject/vxqocktx.html