swiper实现icons列表超出数量滑动轮播

红太狼 2022-02-25 13:35 275阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMDIxMzU3_size_16_color_FFFFFF_t_70][]

h5页面 业务逻辑 ajax获取列表信息 通过列表数量判断 显示是否滑动轮播

因为是动态加载html所以都写在了script标签里面“

//ajax 获取iconsdata数据,并把元素赋给homes
          $("#homes").append(iconslist(iconsdata));
           swiper();
    
    function swiper(){
            //icons滑动轮播
            var swiper = new Swiper('.icons-wrapper', {
                loop:false,
                autoplay:false,
                observer: true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents: true,//修改swiper的父元素时，自动初始化swiper
                pagination: {
                    el: '.swiper-pagination'
                }
            });
        }
    
    //icons列表
        function iconslist(iconsdata){
            var shownum = 10;               //每页显示icons的个数
            var length = iconsdata.length;  //判断数据个数
            var p = Math.ceil(length/shownum);  //向上取整
            var html="";
            html+='<div class="swiper-container icons-wrapper">'
            html+='    <div class="swiper-wrapper">'
            for(var i = 0;i<p;i++){             //遍历icons
                html+='<ul class="swiper-slide icons-items">'
                $.each(iconsdata,function (index,val) {
                    if(i==0){                   //第一页显示icons遍历
                        if(index < shownum){
                            html+="<li class='"+val.typename+"' data-name='"+val.typename+"'><img src='"+val.image+"' alt=''><div>"+val.title+"</div></li>"
                        }else{                  //超出第一页个数返回进入到新的轮播页
                            return;
                        }
                    }else{                          //其他页显示icons遍历
                        var x = i*shownum + index;  //获取新的一页索引
                        if( x < length ){           //判断索引值是否超出当前页
                            var vals =  iconsdata[x];
                            html+="<li class='"+vals.typename+"' data-name='"+vals.typename+"'><img src='"+vals.image+"' alt=''><div>"+vals.title+"</div></li>"
                        }else{                      //超出当前页个数返回进入到新的轮播页
                            return;
                        }
                    }
                });
                html+='</ul>'
            }
            html+='    </div>'
            if( p > 1){
                html+='<div class="swiper-pagination"></div>'
            }
            html+='</div>'
            return html;
        }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMDIxMzU3_size_16_color_FFFFFF_t_70]: /images/20220225/f3d708ce52574bf8b60f319203dd12fe.png