Swiper显示后再隐藏swiper组件时需要做的事情

1.在隐藏swiper的同时需要销毁Swiper,所以，在定义swiper时必须要给swiper起一个变量名

  data() {
    return {
      serviceSwiper: null,
      serviceSwiperStyle: "",
    };
  },
  methods: {
      async initPolicy() {
      //需要隐藏swiper的条件
      if (this.$store.state.areaId != "37") {
        //判断swiper是否存在
        if (this.serviceSwiper) {
          //销毁swiper，但是必须带有false。否则影响后面数据的更新
          this.serviceSwiper.destroy(false);
          //更新需要更新的数据
          this.policyData = [];
          //虽然销毁了swiper，但是swiper在元素上添加的属性： transform，transition-duration还存在，需要手动去除。
          this.serviceSwiperStyle = "";
        }
      }
      //其他的操作
      this.reFresh1 = false;
      let res = {
        data: [],
      };
      if (this.$store.state.areaId == "37") {
        res = await getPolicy(areaId);
        this.reFresh1 = true;
      }
      if (res.data.length > 0) {
        this.policyData = res.data;
        if (this.policyData.length > 5) {
          this.$nextTick(() => {
            //初始化swiper---可以循环轮播
            this.serviceSwiper = new Swiper(".serviceSwiper", {
              direction: "vertical",
              slidesPerView: 5, // 显示的数量
              slidesPerGroup: 1,
              paginationClickable: true,
              loop: true,
              autoplay: 5000,
              autoplayDisableOnInteraction: false,
              preventLinksPropagation: false,
            });
          });
        } else {
          this.$nextTick(() => {
            //初始化swiper---不可以循环轮播
            this.serviceSwiper = new Swiper(".serviceSwiper", {
              direction: "vertical",
              slidesPerView: 5, // 显示的数量
              slidesPerGroup: 1,
              loop: false,
            });
          });
        }
      } else {
        this.policyData = [];
      }
    },
  }

:style="{ transform: serviceSwiperStyle,‘transition-duration’: serviceSwiperStyle, }"并不是写在带有swiper的div上，而是放在不应该出现swiper却出现了swiper的div上面

<div
   class="mask"
   :style="{
   transform: serviceSwiperStyle,
   'transition-duration': serviceSwiperStyle,
   }"
>
<!--其他内容-->
.......................
</div>

这样就可以了