vue的swiper组件使用，获取当前滑动位置activeIndex

使用vue版的swiper组件vue-awesome-swiper，这个是最好用的，并且api和swiper基本一致。使用的时候需要拿到滑动之后当前的index。要获取activeIndex这个值。错误写法官方文档这么写有问题，我在全局引入的时候这样根本拿不到。正确写法this.$refs.mySwiper.swiper这样写才可以。然后监听@slideChange="slid...

vieber

16030人浏览 · 2020-04-26 17:11:12

vieber · 2020-04-26 17:11:12 发布

使用vue版的swiper组件vue-awesome-swiper，这个是最好用的，并且api和swiper基本一致。

使用的时候需要拿到滑动之后当前的index。

要获取activeIndex这个值。

错误写法

在这里插入图片描述
官方文档这么写有问题，我在全局引入的时候这样根本拿不到。

正确写法

this.$refs.mySwiper.swiper

这样写才可以。

然后监听@slideChange="slideChange"slideChange事件，在这个事件里面

this.$refs.mySwiper.swiper.activeIndex

这样获取activeIndex，这样就知道了当前是处于哪个index了。

参考文档

https://github.com/surmon-china/vue-awesome-swiper

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^