swiper/vue踩坑 切换问题

<template>
  <swiper
    :effect="effect"
    :grabCursor="grabCursor"
    :modules="modules"
    :autoplay="autoplay"
    :loop="loop"
    :class="clazz"
    :pagination="pagination"
    :navigation="navigation"
  
    @touchmove="touchMove"
    @swiper="onSwiper"
  >
    <swiper-slide
      v-for="(item, index) in list"
      :key="index"
    >
      <slot :item="item" name="img"></slot>
    </swiper-slide>
  </swiper>
</template>

<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
const emit = defineEmits(["click"]);

const props = defineProps({
  effect: {
    type: String,
    default: "cards",
  },
  grabCursor: {
    type: Boolean,
    default: true,
  },
  modules: {
    type: Array,
  },
  loop: {
    type: Boolean,
    default: true,
  },
  autoplay: {
    type: Boolean,
    default: true,
  },
  clazz: {
    type: String,
    default: "home-swiper",
  },
  list: {
    type: Array,
  },
  native: {
    type: Boolean,
    default: false,
  },
  pagination: {
    type: Boolean,
    default: true,
  },
  navigation: {
    type: Boolean,
    default: false,
  },
});
const click = (item) => {
  emit("click", item);
};
const onSwiper = (swiper) => {
  swiper.on('click', function(e) {
    click(props.list[e.activeIndex]);
  })
}
const touchMove = (e) => {
  if (props.native) return;
  let _activeDom = document.getElementsByClassName("swiper-slide-active")[0];
  let _activeTransform = _activeDom.style.transform;
  _activeTransform = _activeTransform.replace(
    /rotateZ\(.*?\)/g,
    "rotateZ(0deg)"
  );
  _activeDom.style.transform = _activeTransform;
  let _nextDom = document.getElementsByClassName("swiper-slide-next")[0];
  if (_nextDom) {
    let _nextTransform = _nextDom.style.transform;
    _nextTransform = _nextTransform.replace(/rotateZ\(.*?\)/g, "rotateZ(0deg)");
    _nextDom.style.transform = _nextTransform;
  }
  let _prevDom = document.getElementsByClassName("swiper-slide-prev")[0];
  if (_prevDom) {
    let _prevTransform = _prevDom.style.transform;
    _prevTransform = _prevTransform.replace(/rotateZ\(.*?\)/g, "rotateZ(0deg)");
    _prevDom.style.transform = _prevTransform;
  }
};
</script>

<style lang="scss" scoped>
.home-swiper {
  margin-top: 20px;
  width: calc(100% - 120px);
  z-index: unset !important;
  box-sizing: border-box;
  //transform: scale(0.9);
}

.swiper-slide {
  width: 100% !important;
}

::v-deep .swiper-slide-shadow {
  background: unset !important;
}

.swiper-3d {
  perspective: 2500px !important;
}

::v-deep .swiper-pagination-bullet-active {
  background-color: #ffffff;
}
// 适配最新活动小米pad轮播图
@media screen and (min-width: 600px) and (max-width: 1200px) {
  .home-swiper {
    padding: 0 15px;
    transform: scale(0.92);
    height: 400px;
  }
  // 适配最新活动ios Ipad轮播图
  @media screen and (min-width: 800px) and (max-width: 1200px) {
    .home-swiper {
      padding: 0 10px;
      transform: scale(0.89);
      height: 430px;
    }
  }
}
</style>

这是一段swiper的组件代码  有个问题 

切换问题

当我切换tab回来时   组件就不执行了  比如划到了第一一页与第二页的中间  就会被测试提一个 样式的bug  那这种情况  有两个方法

  一个是暴力执行  v-if 我采用的是v-if的route的name   这样的话  当name==当前页面时  组件就会重新执行 不会出现停止不动的现象  （不过这个也有个弊端  就比如你不管划到多少页 只要一回到这个页面 组件就会重新执行回到第一张图）若不想这样  尝试第二种方法

通过查询文档 发现有两个属性   :observer="true"    :observeParents="true"

原因：如果swiper一开始处于display：none的情况下，后来display：block，那么swiper功能就会出现问题，比如分页器失效
开启监视器：当swiper样式改变的时候(例如隐藏显示)，自动初始化swiper
• observer: true
• observeParents: true这就解决了切换问题