vue swiper插件使用(滑动事件)

学了那么久的vue,也提升了不少,主要就是要学会看api,去多想,多实践。之前已经能够做到了可以获取到当前滑动到了第几页。那么如果当滑动到当前页的时候又要执行相对应的方法,哪有应该如何做呢?

然后我就又去看swiper-vue的api https://github.com/surmon-china/vue-awesome-swiper  不看例子的直接通向这个网址

 

来一个栗子:

vue swiper插件使用(滑动事件)_第1张图片





点击当前页,就可以获取这个当前的第几页。

 

vue swiper插件使用(滑动事件)_第2张图片

这里还有很多的方法,方法都见文知意,然后自己写下来跑一跑。

项目中还遇到一个问题就是要跳转到指定的页码下,一开始我以为只要修改initialSlide参数就可以了,但是这个initialSlide只能在初始化的时候才能成功,而且只能修改一次。其实这个api中就已经写了如何做到,就是使用swiper中的方法sliderTo

vue swiper插件使用(滑动事件)_第3张图片

跳转到需要的页面 this.$refs.mySwiper.$swiper.slideTo(3, 1000, false)

vue swiper插件使用(滑动事件)_第4张图片

栗子就不举了,我写这些就是为了记录下来,方便自己以后查看,或者让别人一起跟我学习。

 

你可能感兴趣的:(vue.js,vue,vue.js)