swiper中常用的事件方法

Posted 2022-02-03 Insideo

通常我们写轮播图都会涉及到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页面。