关于swiper插件在vue2的使用

在 Vue2 中使用 vue-awesome-swiper（Swiper）

项目中用到 vue-awesome-swiper 做轮播，以下是基本使用步骤。

第一步：安装依赖

1. npm install swiper vue-awesome-swiper --save
   
2. # 或指定版本
   
3. npm install swiper [email protected] --save

复制代码

第二步：引入组件

1. import { swiper, swiperSlide } from "vue-awesome-swiper";
   
2. import "swiper/dist/css/swiper.css";
   
3. 
   
4. export default {
   
5.     components: {
   
6.         swiper,
   
7.         swiperSlide,
   
8.     },
   
9.     // ...
   
10. }

复制代码

第三步：创建容器

1. <swiper :options="swiperOption">
   
2.     <swiper-slide> slide 1 </swiper-slide>
   
3.     <swiper-slide> slide 2 </swiper-slide>
   
4.     <swiper-slide> slide 3 </swiper-slide>
   
5. </swiper>

复制代码

第四步：创建配置对象

1. swiperOption: {
   
2.     effect: "coverflow",
   
3.     grabCursor: true,
   
4.     centeredSlides: true,
   
5.     slidesPerView: "auto",
   
6.     coverflowEffect: {
   
7.         rotate: 0,
   
8.         stretch: -80,   // slide 左右距离
   
9.         depth: 400,     // slide 前后距离
   
10.         modifier: 0.5,
    
11.         slideShadows: false
    
12.     },
    
13.     loop: true,
    
14.     on: {
    
15.         click: function () {
    
16.             // 监听点击滑块事件
    
17.             // this.realIndex 是当前 swiper 实例的激活索引
    
18.         },
    
19.         slideChange: function () {
    
20.             console.log(this.realIndex);
    
21.         }
    
22.     }
    
23. }

复制代码

swiper 的监听事件都可以在 on 配置对象中绑定，此时 this 指向 swiper 实例本身。

另一种绑定事件的方式

如果想通过 ref 获取 swiper 对象，可给组件绑定 ref，然后通过：

1. this.$refs.myswiper.swiper

复制代码

获取实例。注意：this.$refs.myswiper.swiper.realIndex 即当前被激活滑块的索引值，this.slides[realIndex] 可获取当前滑块内容。

qidao123.com企服评测-应用市场 编辑提示