swiper中動態添加了后台獲取到的數據填充之后不顯示的問題

方法一：

在最開始初始化swiper的時候就添加一下三條注釋的語句（未測試）

var mySwiper = new Swiper('.swiper-container',{
            loop: true,
            autoplay: 2000,
            direction : 'vertical',
            // initialSlide :0,
            // observer:true,//修改swiper自己或子元素時，自動初始化swiper
            // observeParents:true//修改swiper的父元素時，自動初始化swiper
        });

 

方法二：

在動態添加完數據之后，添加一個swiper的初始化即可：mySwiper.init(); (mySwiper為Swiper的實例對象) （測試好用）

示例：

var mySwiper = new Swiper('.swiper-container',{
            loop: true,
            autoplay: 2000,
            direction : 'vertical',
        });
        //每隔5秒查一次新數據
        setInterval ("getProjects()", 5000);
        // getProjects();
        function getProjects(){
            $.ajax({
                type : "POST",
                url : "lib/getUsers.php",
                dataType:"json",
                success : function(result){
                    if (result.code == "0") {
                        console.log("no data");
                    } else {
                        var users = result.users;
                        console.log(users);
                        for (var i = 0; i < users.length; i++) {
                            
                            var str = "";
                            str += "<div class='swiper-slide'>";
                            str += users[i].name;
                            str += "</div>";
                            $(".swiper-wrapper").append(str);
                            mySwiper.init();
                        }
                    }
                },
                error : function(){
                    alert("網絡異常,請重試！");
                    return;
                }
            }); 

        }