記錄一下使用swiper遇到的坑

loop

設置爲true 則開啓loop模式。loop模式：會在本來slide先後複製若干個slide(默認一個)並在合適的時候切換，讓Swiper看起來是循環的。
loop模式在與free模式同用時會產生抖動，由於free模式下沒有複製slide的時間點。

這裏打開循環模式的時候就會複製slide

使用renderBullet(分頁器)的時候儘可能不要打開循環模式

• 這是我遇到的坑
  

<swiper :options="swiperOption2" ref="mySwiper">
        <!-- slides -->
        <swiper-slide>I'm Slide 1</swiper-slide>
        <swiper-slide>I'm Slide 2</swiper-slide>
        <swiper-slide>I'm Slide 3</swiper-slide>
        <swiper-slide>I'm Slide 4</swiper-slide>
        <swiper-slide>I'm Slide 5</swiper-slide>
        <swiper-slide>I'm Slide 6</swiper-slide>
        <swiper-slide>I'm Slide 7</swiper-slide>
        <swiper-slide>I'm Slide 8</swiper-slide>
        <swiper-slide>I'm Slide 9</swiper-slide>
        <swiper-slide>I'm Slide 10</swiper-slide>
        <swiper-slide>I'm Slide 11</swiper-slide>
        <swiper-slide>I'm Slide 12</swiper-slide>
        <swiper-slide>I'm Slide 13</swiper-slide>
        <swiper-slide>I'm Slide 14</swiper-slide>
        <swiper-slide>I'm Slide 15</swiper-slide>
        <swiper-slide>I'm Slide 16</swiper-slide>
        <swiper-slide>I'm Slide 17</swiper-slide>
        <swiper-slide>I'm Slide 18</swiper-slide>
        <swiper-slide>I'm Slide 18</swiper-slide>
        <swiper-slide>I'm Slide 18</swiper-slide>
        <swiper-slide>I'm Slide 18</swiper-slide>
        <swiper-slide>I'm Slide 18</swiper-slide>
        <!-- <div class="swiper-button-prev" slot="button-prev"></div> -->
        <!-- <div class="swiper-button-next" slot="button-next"></div> -->
        <!-- <div class="swiper-scrollbar" slot="scrollbar"></div> -->
      </swiper>

swiperOption2: {
         autoplay: false,
         loop: true//這裏我打開了循環
        slidesPerView: 3,//設置slider容器可以同時顯示的slides數量
        slidesPerGroup: 3,//定義slides的數量多少爲一組,這裏一次切換一組也就是切換了3個
        slidesPerColumn: 2,//多行佈局裏面每列的slide數量
        slidesPerColumnFill: "column",//這裏以列的形式排列
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          renderBullet: function(index, className) {
            let text = "";
            switch (index) {
              case 0:
                text = "所有";
                break;
              case 1:
                text = "網站";
                break;
              case 2:
                text = "小程序";
                break;
              case 3:
                text = "APP";
                break;
            }
            return '<span class="' + className + '">' + text  + "</span>";
          }
        },
        

       
      }

這裏生成的按鈕數量是按照你的slide數量比例來生成的,當你打開loop(循環模式)就會先後複製若干個slide,這樣就會干擾生成的按鈕數量,從而到不到你預想的效果,這是一個坑,再次記錄但願本身不會再次掉進這個坑