swiper的基本使用

1.引入响应的jS|CSS包

2.页面中的结构务必要有

3.new Swiper实例【轮播图中添加动态效果】

---ListContainer组件开发的重点

   1.安装swiper插件：@5

   npm install --save swiper@5

   2.引入包和样式

   import Swiper from "swiper";

   import "swiper/css/swiper.css";

   3.页面结构

    <div

              class="swiper-slide"

              v-for="(carousel, index) in bannerList"

              :key="carousel.id"

            >

   4.实例化（在mounted）中给轮播图添加动态效果

   watch：数据监听，监听已有数据的变化,但不能保证数据执行完毕

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

   可以保证页面中的结构一定是有的，经常和一些插件一起使用

   watch+nextTick:

   

   watch: {
    //监听bannerList数据的变化，因为这条数据发生过变化---由一个空数组变为数组里面有四个元素
    bannerList: {
      //只能保证数据有了，不能保证数据执行完毕了，只有执行完毕了才能有结构，有了结构才能new Swiper实例
      handler(newValue, oldValue) {
          //  nextTick: 在下一次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM
        this.$nextTick(() => {
          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",
              },
            }
          );
        });
      },
    },
  },