关于swiper插件在vue2的使用

语言: CN / TW / HK
时间 2022-06-25 09:25:00
主题:

最近做项目用到了vue-awesome-swiper，总结一下使用方法

第一步：安装依赖

npm install swiper vue-awesome-swiper --save

or npm install swiper [email protected] --save

第二步：引入组件

import { swiper, swiperSlide } from "vue-awesome-swiper";

import "swiper/dist/css/swiper.css";

export default {

components: {

swiper,

swiperSlide,

},

第三步：创建容器：

第四步：创建配置对象

swiperOption: {

effect: "coverflow",

grabCursor: true,

centeredSlides: true,

slidesPerView: "auto",

coverflowEffect: {

rotate: 0,

stretch: -80, // slide左右距离

depth: 400, // slide前后距离

modifier: 0.5, //

slideShadows: false, // 滑块遮罩层

},

loop: true,

on: {

click: function () {

// 监听点击滑块事件// this.realIndex是当前swpier 实例的对象属性

// console.log(this.realIndex); // 当前滑块索引

},

slideChange: function () {

console.log(this.realIndex);

},

}, //on配置对象用来绑定swipet事件的回调

},

这里主要swiper的一些监听事件可以在on配置对象中绑定，此时的this是swiper本身

也可以通过下图的方式绑定：

这种方式绑定如果想获取到swiper对象，需要通过绑定ref然后通过：

this.$refs.myswiper.swiper来获取

注意：this.$refs.myswiper.swiper.realIndex就是当前被激活滑块的索引值。可以通过this.slides[realIndex]来获取当前滑块的内容

「」