一个页面使用多次swiper，相互冲突的问题，或接接口不循环的问题

女爷i 2022-12-23 06:57 142阅读 0赞

首先，可以用不同的 id 或 class 来区分他们，并设置样式

<template>
    <div>
    
       <div class="swiper-container" id="container1">
            <div class="swiper-wrapper">
              <div class="swiper-slide swiper-slide1">
                <img src="" alt="" />
              </div>
              <div class="swiper-slide swiper-slide1">
                <img src="" alt="" />
              </div>
              <div class="swiper-slide swiper-slide1">
                <img src="" alt="" />
              </div>
            </div>
            
            <div
              class="swiper-button-prev swiper_btn"
              :style="{ backgroundImage: 'url(' + bg + ')' }"
            ></div>
            <div
              class="swiper-button-next swiper_btn"
              :style="{ backgroundImage: 'url(' + bg1 + ')' }"
            ></div>
          </div>
    
         
          <div class="swiper-container" id="container">
              <div class="swiper-wrapper">
                <div class="swiper-slide swiper_slide2" v-for="(item, i) in list" :key="i">
                    <img :src="item.img" alt="" />
                    <div>
                      <h3>{ {  item.wenzi }}</h3>
                    </div>
                </div>
              </div>
            </div>
    </div>
    </template>
    
    <script>
    import Swiper from "swiper";
    data(){ 
      return{ },
      mounted(){ 
      /* 第一个轮播 */
           var container1 = new Swiper("#container1", { 
           direction:'horizontal',
          autoplay: 2000,
          loop: true,
          // 如果需要前进后退按钮
          prevButton: ".swiper-button-prev",
          nextButton: ".swiper-button-next",
        });
        /* 第二个需要请求数据的轮播 */
        this.initSwiper();
      },
      methods:{ 
      /* 第二个需要请求数据的轮播，这里用了一个定时器，防止loop失效 */
      initSwiper(){ 
          setTimeout(()=>{ 
            var container = new Swiper("#container", { 
           direction:'horizontal',
          autoplay: 2000,
          loop: true,
        });
          },300)
        }
      }
    }
    </script>