2020-11-24：vue-awesome-swiper、深度监听

1、vue-awesome-swiper

①、当自动循环无效：

image.png

v-if

image.png

②、监听resize事件：

在swiperOption配置上：

     on: {
          resize: () => {
            this.getVehicleFailure()
          }
        }

③、自定义分页器样式

在swiperOption配置上：

        pagination: {
          // 分页
          el: '.swiper-pagination',
          clickable: true,
          bulletClass: 'my-bullet',
          bulletActiveClass: 'my-bullet-active'
        },

在css上：

④、强制初始化

this.$refs.mySwiper.swiper.slideTo(1)

⑤、各个方法的使用，在官网上对应Swiper的配置选项查自己版本使用的

中文官网：https://www.swiper.com.cn/api/methods/116.html

⑥、swiper实现loop的时候应该是对slider做了一个duplicate，但是关键是做这个duplicate的时机，有些数据是延迟获取后渲染dom的，swiper应该复制的只是dom元素而不是代码，所以延迟的那部分它无法获取到。

所以在我自动设置的缩放页面重新计算布局时，轮播到第一页会任然停留在未改变布局的第一页。
用笨办法：在配置中设置：

      on: {
          resize: () => {
            // this.$refs.mySwiperSur.swiper.slideTo(1)
            this.$refs.mySwiperSur.swiper.update(true)
            this.getSurveillanceVideo()
          },
          reachEnd: () => {
            this.$refs.mySwiperSur.swiper.slideTo(1)
          }//!!!!
        }

⑦、关闭滑动轮播的效果

在slide上加上swiper-no-swiping类名。
在配置上加上noSwiping: true设置。

2、深度监听

  watch: {
    xxx: { // 监听的对象
      deep: true, // 深度监听设置为 true
      handler() {
       xxx
      }
    }
  },