VUE项目--轮播图

1. 安装（版本5较稳定）

npm install swiper@5 

2.1 引入

在需要用到轮播图的组件（ListContainer）中引入swiper

  import Swiper from 'swiper'

2.2 引入样式

因为其他地方也需要轮播图，也需要swiper的样式，所以在入口文件main.js中统一引入

 import 'swiper/css/swiper.css'

3. 初始化swiper实例

3.1 在哪里初始化 ？

初始化swiper实例之前，页面中的节点（结构）必须完整；
对于Vue一个组件而言，mounted 【 组件挂载完毕：相应的结构不就有了吗】
mounted—>组件挂载完毕

3.2 写在mounted里没效果？？

因为dispatch当中涉及到异步语句，导致v-for遍历的时候结构还不完整；
而Swiper需要获取到轮播图的节点DOM，才能实现轮播效果；

3.3 解决方案

问题出现在：v-for遍历来自于Vuex的数据（通过ajax向服务器发请求，存在异步）
watch: 监听属性，watch可以检测监听bannerList数据的变化：bannerList由空数组–→ 数组里有四个元素
当执行handler方法时，表明组件实例身上即bannerList是有数据了，但是不能确保v-for执行是否结束
使用 nextTick 解决：在下一次DOM更新结束后执行其指定的回调

 watch: {
    bannerList: {
      handler(newValue, oldValue) {
        // 通过watch监听bannerList的属性值的变化
        this.$nextTick(() => {
          // 执行该回调时，数据已经返回，v-for执行完毕（有完整的DOM结构)
          var mySwiper = new Swiper(this.$refs.mySwiper, {
            loop: true, // 循环模式选项
            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
              // 点击分页器的指示点,可控制Swiper切换
              clickable: true,
            },
            // 如果需要前进后退按钮
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
          });
        });
      },
    },
  },