swiper中常用的事件方法

最新推荐文章于 2024-01-23 16:51:24 发布

原创最新推荐文章于 2024-01-23 16:51:24 发布 · 1.2w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

swiper 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Swiper轮播图插件中常用的事件方法，包括slideTo用于跳转到指定slide，以及slideChangeTransitionStart、slideChangeTransitionEnd和slideChange三个页面改变事件。每个事件在轮播过程的不同阶段触发，提供了对轮播状态的精确控制，如在切换开始、结束或进行中时执行自定义操作。同时，文章提到了activeIndex作为slide索引的重要作用，可用于实现更丰富的交互功能。

通常我们写轮播图都会涉及到swiper这个插件库，但是很多人不知道怎么用，往往踩了很多坑，下面就举一些swiper中常用的事件方法来说：

去下一个slide：

 this.mySwiper= new Swiper(".mySwiper", {
        
}
this.mySwiper.slideTo(n)

例如：给需要某一dom绑定点击事件，要跳到固定的slide就可使用slideTo 了。

swiper中页面改变事件，就是滑动轮播触发该事件，有以下3种：

//slideChangeTransitionStart回调函数，swiper从当前slide开始过渡到另一个slide时执行。

var mySwiper = new Swiper('.swiper',{
  on: {
    slideChangeTransitionStart: function(){
      alert(this.activeIndex);
    },
  },
})

简而言之就是一个页面轮播到另一个页面开始时触发该函数。

//slideChangeTransitionEnd回调函数，swiper从当前slide开始过渡到另一个slide时执行。

var mySwiper = new Swiper('.swiper',{
  on: {
    slideChangeTransitionEnd: function(){
      alert(this.activeIndex);//切换结束时，告诉我现在是第几个slide
    },
  },
})

简而言之就是一个页面轮播到另一个页面结束时触发该函数。

//slideChange事件函数。在当前Slide切换到另一个Slide时执行(activeIndex发生改变)，一般是在点击控制组件、释放滑动的时间点。
var mySwiper = new Swiper('.swiper',{
  on:{
    slideChange: function(){
      alert('改变了，activeIndex为'+this.activeIndex);
    },
  },
})

简而言之就是一个页面轮播到另一个页面中间触发该函数。

另外在页面改变时，activeIndex也随之改变，可以把activeIndex看成是slide页面的索引，通过activeIndex，可以实现控制slide页面。