SwiperJS如何检测滑动方向？单slide循环场景下获取滑动方向方法

索引固定返回1的原因 #

单Slide开启loop属性时，Swiper会自动在原Slide前后各复制1个Slide实现无缝循环效果，实际渲染的Slide总数为3，默认激活中间索引为1的Slide，因此直接读取activeIndex始终返回1属于loop模式的正常表现，无需调整Swiper配置，通过方向判断自行维护日期变量即可。

滑动方向获取方法 #

Swiper没有内置swipeLeft/swipeRight这类专属方向事件，但可以通过slideChange事件配合实例内置属性直接拿到滑动方向：

• 监听slideChange事件，读取Swiper实例的swipeDirection属性，返回值为next代表左滑（切换下一个），返回值为prev代表右滑（切换上一个），示例代码如下：

const calendarSwiper = new Swiper('.swiper-container', {
  loop: true,
  // 其余你的原有配置
  on: {
    slideChange: function () {
      // this就是当前Swiper实例
      const swipeDir = this.swipeDirection
      if (swipeDir === 'next') {
        // 左滑逻辑：加载后一天的备忘内容
      } else if (swipeDir === 'prev') {
        // 右滑逻辑：加载前一天的备忘内容
      }
      // 数据请求完成后直接更新当前Slide的内容即可
    }
  }
})

额外优化建议 #

不需要依赖Swiper的索引值管理日期顺序，你可以单独维护一个当前展示日期的全局变量，每次滑动时根据方向对该变量做增减操作，再对应拉取数据渲染即可，完全避开loop模式下的索引异常问题。

内容的提问来源于stack exchange，提问作者Jongwoo Lee