After switching routes and returning to the page, the carousel images will have overlapping bugs

[19900101eyetest]

code

<script setup lang="ts" name="abLunbo">
import { KeenSliderOptions, useKeenSlider } from "keen-slider/vue";
import "keen-slider/keen-slider.min.css";
import { s1, s2 } from "@/lib/abSwipe/abLunbo";

// docs: https://keen-slider.io/docs#usage-in-vue-3
// slider: https://keen-slider.io/docs#methods--properties

interface Props {
  slides: any[];
  type?: number; // 场景 1
  slideInterval?: number; // 轮播间隔时间
  prop?: KeenSliderOptions; //
  shouldScrollNum?: number;
}

const props = withDefaults(defineProps<Props>(), {
  slideInterval: 3000,
  type: 1,
  shouldScrollNum: 2,
  prop: () => {
    return {
      loop: true, // 无缝循环
      drag: false, // 可拖拽
    };
  },
});
// Emits 声明
const emit = defineEmits(["slideChange"]);

// 轮播时间配置
const SLIDE_INTERVAL = ref(props.slideInterval);
// 数据条数大于2时启用轮播
const isLoopEnabled = computed(() => props.slides.length > props.shouldScrollNum);
// 轮播基础配置
const complexOptions = computed(() => {
  // console.log("isLoopEnabled: ", isLoopEnabled);
  let options = {
    loop: isLoopEnabled.value,
  };
  if (props.type == 1) {
    options = {
      // renderMode: "performance":性能优先 custom:自定义 precision:精确, // 渲染模式，
      // rtl: false, // 自动滚动方向控制 false 表示从左往右，true 表示从右往左
      loop: isLoopEnabled.value,
      drag: false,
      slides: {
        perView: 2.36,
        spacing: 10,
      },
      // created(e)
      // detailsChanged(e) {
    };
  }
  return {
    ...options,
    ...props.prop,
    slideChanged(e) {
      // console.log("slide changed", );
      const index = e.track.details.rel;
      emit("slideChange", { index });
    },
  };
});
// 轮播动画配置
const complexSlidePlugins = computed(() => {
  if (isLoopEnabled.value) {
    if (props.type == 1) {
      return s1;
    } else if (props.type == 2) {
      return s2;
    }
  }
  return false;
});
// 创建轮播滑动插件
const [container, slider] = useKeenSlider(complexOptions.value, [
  slider => {
    if (complexSlidePlugins.value) {
      if ([1, 2].includes(props.type)) {
        complexSlidePlugins.value(slider, SLIDE_INTERVAL.value);
      }
    }
  },
]);

defineExpose({
  container,
  slider,
});

// exp:
// <AbLunbo ref="swiperRef" class="ml-16" :type="1" :slides="swiperList" :slideInterval="8000" @slideChange="onSlideChange2">
</script>

<template>
  <div ref="container" class="keen-slider">
    <div v-for="(item, index) in slides" :key="index" class="keen-slider__slide">
      <slot name="child" :item="item" :index="index">{{ item }}</slot>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>


--
<AbLunbo ref="swiperRef" class="ml-16" :type="1" :slides="swiperList" :slideInterval="8000" @slideChange="onSlideChange2">

-- Model: iPhone 15 pro max

-- Phenomenon: The slideshows may overlap each other