Swiper列表轮播动态获取数据最后一页数据陷入死循环问题

当获取数据时,在下方代码中添加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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值