swiper获取滑动前后下标值

你可以监听 `swiper` 的 `slideChange` 事件来获取滑动前后的下标值。具体做法如下：

1. 在 `swiper` 的初始化配置中添加 `on` 属性，用来定义事件监听函数，例如：

var mySwiper = new Swiper('.swiper-container', {
  // ...其他配置
  on: {
    slideChange: function () {
      // 在这里处理滑动前后的下标值
    },
  },
})

2. 在 `slideChange` 事件监听函数中，调用 `activeIndex` 属性来获取当前活动的 slide 下标，例如：

var mySwiper = new Swiper('.swiper-container', {
  // ...其他配置
  on: {
    slideChange: function () {
      var currentIndex = this.activeIndex // 当前活动的 slide 下标
      var previousIndex = this.previousIndex // 上一个活动的 slide 下标
      // 在这里根据需要处理 currentIndex 和 previousIndex
    },
  },
})

这样，你就可以在 `slideChange` 事件监听函数中获取到滑动前后的下标值了。

相关问题

uniapp swiper 阻止滑动

在Uniapp中，可以通过在swiper-item上添加@touchmove.stop事件来阻止滑动。例如，可以像这样给swiper-item添加事件：`<swiper-item @touchmove.stop="catchTouchMove">...</swiper-item>` [1]。在catchTouchMove方法中，可以返回一个空值来阻止滑动：`catchTouchMove(){ return; }` [1]。这样就可以实现阻止swiper的滑动效果。另外，也可以在swiper-item上添加@touchstart.stop事件来阻止滑动：`<swiper-item @touchstart.stop="catchTouchMove">...</swiper-item>` [2]。无论是哪种方法，都可以实现阻止swiper的滑动效果。

swiper-slide上下滑动

回答: 如果你想实现swiper-slide上下滑动，你可以尝试使用swiper的direction属性来设置滑动方向为垂直方向。在你的代码中，你可以添加direction: 'vertical'来实现这个效果。例如：

direction: 'vertical',

这样设置后，你的swiper-slide将会在垂直方向上进行滑动。同时，你也可以根据需要调整其他属性，比如slidesPerView来设置每次滑动显示的slide数量，spaceBetween来设置slide之间的间距等。希望这个回答对你有帮助！\[1\] \[2\] \[3\]
#### 引用[.reference_title]
- *1* *3* [2021-6-25 工作记录 Swiper--解决swiper滑动迟钝现象+实现swiper-slide-active居中+轮播到某slide时，修改...](https://blog.csdn.net/weixin_48850734/article/details/118332427)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [原来swiper的这个swiper-slide的间距调的这儿！](https://blog.csdn.net/m0_65292523/article/details/126361315)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]