vue-splide 轮播图在切换页面时重新回到原页面之后轮播图片顺序错乱或者被替换掉的bug解决办法

本文链接：https://blog.csdn.net/SpriteDD/article/details/127803341

博客介绍了在使用vue-splide轮播图组件时遇到的顺序错乱和全屏显示问题。通过分析splide.js的文档，发现type='loop'属性是问题源头。移除该属性解决了顺序错乱，但导致了全屏显示不正常。为了解决全屏问题，博主利用vue-splide的响应式特性，通过条件判断设置fixedWidth，确保在非移动设备上轮播图能全屏显示。最终，通过调整ts代码成功修复了问题。

摘要由CSDN通过智能技术生成

vue-splide 轮播图在切换页面时重新回到原页面之后轮播图片顺序错乱或者被替换掉的bug解决办法

在我们引入vue-splide 时，很轻松实现轮播图，博主应了测试同学的需求，有幸修改前端同学的代码，修改如标题所说的问题，在对splide.js 的文档进行细品之后，之后发现里面大部分同学都会复制的一个 options 配置里面的 type 属性：
先看看type 这个插间配置里面的定义

轮播图类型
在这里插入图片描述
不难看出，type =‘loop’ 确实循环实现轮播图了，但是问题恰恰就出现在这个loop值，splide.js 在没放入 type=‘loop’ 本身也可以实现循环播放，但是加了之后就会出现顺序错乱的情况，博主前面将问题定位在包版本太低了，所以更换项目的依赖包版本，显然是不起效的，后面在机缘巧合下去掉type = ‘loop’ 属性，发现轮播图竟然正常了，博主在认为问题解决了，当时博主屏幕是笔记本尺寸，看着毫无问题，没想到几天后又有一个新的问题出现了，去掉那个属性之后会导致图片占比没办法到全屏，
博主在改插件css 发现，继承层级太多了，容易改乱了，所以利用vue-splide响应式进行 fixedWidth 设置固定宽，判断是否是手机端之后给fixedWidth 赋值。问题解决，博主使用ts 代码实现的，部分代码块如下

 :options="{
                    classes: {
                        pagination: 'home__pagination',
                    },
                    autoplay: true,
                    interval: 3000,
                    rewind: true,
                    arrows: false,
                    drag: true,
                    fixedWidth: !isMobile? windowWidth : '100%'
                    
                }"



ts 代码
  // 引入工具包
  import { useWindowSize } from '@vueuse/core'; 
  //初始化变量
  const { width } = useWindowSize();
  const isMobile = computed(() => width.value <= 768);
  const windowWidth = width.value

链接: splide.js官网
在这里插入图片描述