Vue项目--轮播图的实现

使用swiper插件实现轮播图

1.安装 cnpm install --save swiper@5

        5版本比较稳定

2.引入swiper，在使需要使用轮播图的组件ListContainer里引入

        import Swiper from 'swiper'

   引入swiper样式，因为下面也有轮播图，所以在入口文件main.js里引入。

        import 'swiper/css/swiper.css'

3.swiper必须先把结构准备好，再新建swiper实例，才能让轮播图有轮播效果！那么新建swiper实例写在哪里就非常重要。mounted只能捕获写在组件模板中的数据渲染结束的时刻，如果写现在mounted里，由于获取轮播图数据是异步操作，此时的数据还没返回来。也就是用v-for建立的结构还没建好，轮播图出不来效果。

4.解决方法：watch+nextTick

watch能监听到bannerList数据已经从空变为有值得状态。但是数据有了，根据数据生成的DOM还没有更新。为了获取更新循环结束后的DOM，需要使用vue.$nextTick(()=>{})

// 为了在数据更新操作之后操作DOM，我们可以在数据变化之后立即使用Vue.nextTick(callback)； 这样回调函数会在DOM更新完成后被调用，就可以拿到最新的DOM元素了。

watch: {
    bannerList: {
      handler(newV, oldV) {
        
        this.$nextTick(() => {
          var mySwiper = new Swiper(".swiper-container", {
            loop: true, // 循环模式选项
            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
            },
            // 如果需要前进后退按钮
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
          });
        });
      },
    },