vue+swiper实现轮播效果笔记整理

swiper代码部分

   <div class="swiper-container" id="mySwiper">
       <div class="swiper-wrapper">
          <div class="swiper-slide" 
          		v-for="(carousel) in bannerList" 
          		:key="carousel.id">
             <img :src="carousel.imgUrl" />
          </div>
       </div>
          <!-- 如果需要分页器 -->
       <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
       <div class="swiper-button-prev"></div>
       <div class="swiper-button-next"></div>
    </div>

使用watch监听属性

watch: {
    //监听bannerList得变化
    bannerList: {
      handler (newVale, oldVale) {
        //当前函数执行只能保证bannerList里面得数据有了，但是无法保证v-for渲染完毕，v-for执行完毕才会有完整结构，结构完整swiper才能使用
        //netxTick:在下次dom更新之前 循环结束之后 执行延迟回调。 在修改数据之后，立即使用这个方法，获取更新后的DOM
        this.$nextTick(() => {
          //当你执行这个回调得时候：保证服务器数据回来了，v-for执行完毕了（轮播图的结构一定有了）
          var mySwiper = new Swiper(document.querySelector(".swiper-container"), {
            loop: true,
            //如果需要分页器
            pagination: {
              el: ".swiper-pagination",
              clickable: true
            },
            //如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
          })
        })
      }
    }

  }

$nextTick

以上方法如果不能实现可以尝试下面得方法但是不推荐使用

---

updated（不推荐使用）

updated () {
     var mySwiper = new Swiper(document.querySelector(".swiper-container"), {
      loop: true,
      //如果需要分页器
     pagination: {
         el: ".swiper-pagination",
         clickable: true
       },
       //如果需要前进后退按钮
      navigation: {
         nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
     })
   },

setTimeout（不推荐使用）

setTimeout(() => {
       var mySwiper = new Swiper(document.querySelector(".swiper-container"), {
         loop: true,
        //如果需要分页器
        pagination: {
           el: ".swiper-pagination",
           clickable: true
         },
         //如果需要前进后退按钮
         navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
         },
       })
     }, 1000)

---

尚品汇实战项目笔记整理