Swiper循环模式下activeIndex值异常问题求助（Framework7场景）

嘿，我来帮你搞明白这个事儿！你遇到的activeIndex出现0和4的情况，完全是Swiper循环模式（loop: true）的机制导致的，咱们一步步拆解：

为什么会出现0、4这些“奇怪”的索引？ #

当你开启loop: true时，Swiper为了实现无缝循环滑动，会偷偷在真实轮播项的前后各复制一份首尾的slide：

• 你原本有3个真实slide：Slide1、Slide2、Slide3
• Swiper会复制Slide3放到最前面（变成第一个“假”slide），复制Slide1放到最后面（变成最后一个“假”slide）
• 这样总共有5个slide，索引就变成了0（复制的Slide3）、1（真实Slide1）、2（真实Slide2）、3（真实Slide3）、4（复制的Slide1）

当你从Slide3继续往右滑，视觉上会无缝切换到Slide1，但实际上先滑到了那个复制的Slide1（索引4），然后Swiper会在后台悄悄把activeIndex切换回1，这就导致你的transitionEnd事件可能捕获到这个临时的4；同理，从Slide1往左滑时，会先到复制的Slide3（索引0），再切换回3，所以你会看到0这个索引。

至于非循环模式下得到1、2、3，这是Framework7封装Swiper时的小调整——它把索引改成了1基计数（默认Swiper是0基），你说可接受那没问题~

怎么拿到真实的轮播项索引？ #

Swiper专门为循环模式提供了realIndex属性，它会直接返回真实轮播项的0基索引，完全忽略那些复制的“替身”slide。你只需要修改你的事件监听代码：

swiper.on("transitionEnd", function(e){
  // 获取真实的0基索引
  var realSlideIndex = swiper.realIndex;
  // 如果想要和非循环模式一致的1基索引，加1就行
  var currentSlideNo = realSlideIndex + 1;
  console.log("I'm on slide no: "+currentSlideNo);
});

这样不管是循环还是非循环模式，你都能拿到准确的真实轮播项序号啦！

你也可以打开浏览器开发者工具看看DOM，那些复制的slide会带有swiper-slide-duplicate类，就是它们在“搞鬼”，但用realIndex就能完美避开它们~

内容的提问来源于stack exchange，提问作者Gianluca Ghettini