轮播图数据是通过异步请求从服务器获取的，通过 v-for 渲染在轮播图页面结构中。此时需要注意的是：需要等轮播图页面结构渲染数据完成后，这时实例化swiper实例，轮播图的动态效果才生效。以下是实现步骤。

一、在项目中安装swiper插件

cnpm install --save swiper@5 安装版本5的swiper

二、在轮播图组件中引入swiper的js文件和css文件

import Swiper from 'swiper'

import 'swiper/css/swiper.css'

 

三、 在轮播图组件中放入轮播图界面结构

<!--banner轮播-->
<div class="swiper-container" id="mySwiper">
  <div class="swiper-wrapper">
    //循环遍历服务器返回的数据
    <div class="swiper-slide" v-for="(carousel, index) in banner" :key="index" >
      <img :src="carousel.imgUrl" />
    </div>
  </div>
  <!-- 如果需要分页器 -->
  <div class="swiper-pagination"></div>

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

 

四、通过 watch + nextTick 实现轮播图动态效果

        轮播图效果实现条件：轮播图页面结构完整后实例化swiper对象。

        目前情况：页面结构依赖于服务器返回的数据，但是从服务器获取数据是异步请求。因此需要等异步请求获取到了数据并且v-for也执行完毕后，实例化swiper。

watch: {
    banner: {
      handler(newBanner, oldBanner) {
        //只能监听到轮播图数据已经有了，但是v-for动态渲染结构我们还是没有办法确定的，因此还是需要用nextTick
        //nextTick:  在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM
        this.$nextTick(() => {
          var mySwiper = new Swiper('.swiper-container', {
            loop: true, // 循环模式选项
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
              //点击小球的时候也切换图片
              clickable: true,
            },
            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            // 如果需要滚动条
            scrollbar: {
              el: '.swiper-scrollbar',
            },
          })
        })
      },
      //立即监听：不管你数据有没有变化，我上来立即监听一次
      immediate: true,
    }