zoukankan      html  css  js  c++  java
  • 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;
                    }
                }); 
    
            }
  • 相关阅读:
    spark hbase
    Benchmark简介
    Flink的安装配置
    Hive入门及常用指令
    hadoop+yarn+hbase+storm+kafka+spark+zookeeper)高可用集群详细配置
    Linux最常用的命名
    数据库的零散的总结
    DBA总结
    MySQL主从架构配置
    mysql主从读写分离,分库分表
  • 原文地址:https://www.cnblogs.com/rommel0618/p/7942894.html
Copyright © 2011-2022 走看看