当获取数据时,在下方代码中添加loop:true;autoplay:true;会实现页面的动态循环;让循环的每一页显示6条数据,每次循环6条数据,
但是出现的问题是,当数据的数量少于或者大于的时候,就会出现轮播的时候最后显示的几条数据陷入死循环(无限循环最后几条数据)状态,
而造成这个死循环的原因就是数据的过多或过少,当数据显示的刚好是每一页的倍数是,比如6,数据有12条、18条、24条都不会出现问题,而当数据有15条或者20条的时候就会出现死循环的状态,
目前的解决方案
我们需要做的就是把数据处理成所需的数量,而这个问题的思路就是把页面补齐,如果数据刚刚好是它的倍数不就不会出现死循环了嘛;
所以接下来所要做的事情就是,先获取数据的长度,跟你想要的数据的取余,所求出来的就是多出来的数据,而用想要的数据减去这个多出来的数据,得到的将其写成对象,循环并且push到数据中,获得的数据就是你想要的那个整数,只不过数据为空,这样就可以实现想要的列表循环的效果了。以下代码是刚刚的核心代码,
function data(e){
var len =0;//定义一个变量
if(e.length%6!==0){
len = e.length%6;//判断数据不为0的时候取余并且赋值到定义的变量里
}
var lenNum = 6-len;//判断所需要添加的数量
var obj = {Id:'',level:'',Exceptiontype:'',describe:'',Exceptiontime:'',header:''};//定义对象的数据结构
for (var i = 0; i <lenNum; i++) {
e.push(obj);//循环并且将对象push到获取的数据中
}
}
以下是练习时的部分代码示例,swiper所需版本是:3.4.2
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
<div class="swiper-slide">Slide 11</div>
<div class="swiper-slide">Slide 12</div>
<div class="swiper-slide">Slide 13</div>
<div class="swiper-slide">Slide 14</div>
<div class="swiper-slide">Slide 15</div>
<div class="swiper-slide">Slide 16</div>
<div class="swiper-slide">Slide 17</div>
<div class="swiper-slide">Slide 18</div>
<div class="swiper-slide">Slide 19</div>
<div class="swiper-slide">Slide 20</div>
</div>
</div>
<script src="./swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
// Slides的滑动方向,设置垂直
direction: 'vertical',
autoplay :3000,//自动播放
speed:1200,//每一页播放的速度
loop:true, //让列表循环播放
// 前进按钮
slidesPerView : 6,//页面中展示6条
slidesPerGroup : 6,//每次循环6条
});
//当swiper的长度小于多少的时候不会再循环
// if(mySwiper.slides.length<=3){
// mySwiper.lockSwipes();
// }
</script>