Swiper 插件实现轮播图

1.swiper插件的使用步骤：

第一步：安装依赖 npm i swiper (可以根据需要选择对应版本)

第二步：引入相应的依赖包（swiper.js swiper.css）

第三步：页面中的结构务必要有

第四步：初始化 swiper 实例，new Swiper() ，给轮播图添加动态的效果

2.DOM结构如下：

3.创建swiper实例

接下来，创建swiper实例即可，主要有以下几种：

第一种（在updated中创建）【最好不用】：

updated() { // 在updated中可以实现功能，但是如果还有其他响应式数据，数据每一次变化 都要重新执行，所以轮播图不采用这个办法
  var mySwiper = new Swiper('.swiper-container', {
    loop: true, // 循环模式选项
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }
  })
},

第二种（在mounted中，配合定时器setTimeout使用）【不太推荐】：

这种方法就是 等我们的数据请求完毕后再创建swiper实例

mounted() { // mounted 组件挂载完毕，正常的结构（DOM）全有了
  // 派发actions 通知Vuex发送Ajax请求，将数据存储在仓库当中
  this.$store.dispatch('getBannerList');
  // 在 new Swiper 之前，页面中的结构必须有，直接把swiper实例放在mounted里面，不能实现功能（因为结构还不完整）
  // 为什么结构还不完整？ 如果写在mounted中，在 new Swiper 之前，还未修改仓库中的bannerList数据
  // 因为dispatch当中涉及到异步语句，导致v-for遍历的时候 结构还没有完整 因此不行
  setTimeout(() => { // 不是最好的
    var mySwiper = new Swiper('.swiper-container', {
      loop: true, // 循环模式选项
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
        clickable: true // 小点点击可以切换
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }
    });
  }, 2000)
},

第三种（watch + $nextTick 配合使用）【最好、推荐】：

我们可以使用watch监听bannerList轮播图列表属性，因为bannerList初始值为空，当它有数据时，我们就可以创建swiper对象。

但是只监听bannerList数据也无法实现功能，这是由于轮播图的html中有v-for的循环，我们是通过v-for遍历bannerList中的图片数据，然后展示。我们的watch只能保证在bannerList变化时创建swiper对象，但是并不能保证此时v-for已经执行完了。假如watch先监听到bannerList数据变化，执行回调函数创建了swiper对象，之后v-for才执行，这样也是无法渲染轮播图图片（因为swiper对象生效的前提是DOM结构已经渲染好了）。

所以最好的解决方法是：使用 watch 监听 bannerList 数据，配合 $nextTick 使用。（此时数据bannerList已经有了，且v-for已经渲染完毕）

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

watch: {
  // 监听bannerList数据的变化。因为这条数据发生过变化---由一个空数组变为数组里面有4个元素
  bannerList: {
    handler(newValue, oldValue) {
      // 通过watch监听bannerList属性的属性值的变化
      // 如果执行handler方法，代表组件实例身上这个属性的属性值已经有了 【是一个数组】
      // 当前的这个函数执行，只能保证bannerList数据已经有了，无法保证v-for执行结束
      // v-for执行完毕了，才有结构【现在在watch当中，没办法保证】
      // nextTick: 在下次DOM更新 循环结束之后 执行延迟回调。在 修改数据之后 立即使用这个方法，获取更新后的DOM ,
      // 下次指 数据已经有了 且 v-for已经渲染完毕（指循环结束之后）
      this.$nextTick(() => { // 当执行回调的时候，保证服务器的数据回来了，且 v-for 执行完毕了，所以轮播图的结构一定有了
        var mySwiper = new Swiper('.swiper-container', {
          loop: true, // 循环模式选项
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
            clickable: true // 小点点击可以切换
          },
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          }
        });
      })
    }
  }
}

4. 完整代码

轮播图的实现思想主要就是：使用mockjs插件模拟数据，并使用store仓库，以及其中的方法获取数据，再使用v-for将数据渲染到页面，最后使用swiper插件 创建swiper实例，实现轮播图的效果（一定要弄清楚，什么时候 创建swiper实例【当页面中已经有了结构】）