一文详解vue-awesome-swiper

Swiper简介

Swiper是纯javascript打造的滑动特效插件，能够实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。vue-awesome-swiper是基于swiper封装的vue插件, 版本对应关系如下：
Swiper 4: v3.1.3
Swiper 3: v2.6.7

引入

1，安装

npm install swiper vue-awesome-swiper --save

2，CDN

<link rel="stylesheet" href="path/to/swiper.css"/>
<script type="text/javascript" src="path/to/swiper.js"></script>
<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/vue-awesome-swiper.js"></script>
<script type="text/javascript">
  Vue.use(window.VueAwesomeSwiper)
</script> 

注册

1，在main.js中全局注册

import VueAwesomeSwiper from 'vue-awesome-swiper';
Vue.use(VueAwesomeSwiper);

2，在.vue文件中局部注册

import { swiper, swiperSlide } from 'vue-awesome-swiper';
components: {
    swiper,
    swiperSlide
}

引入样式

import 'swiper/dist/css/swiper.css';

要在webpack.base.conf.js的rules数组中配置

{
  test: /\.css$/,
  use: [
    {
      loader: "style-loader"
    }, {
      loader: "css-loader"
    }
  ]
}

不然会报错：
ERROR in ./node_modules/swiper/dist/css/swiper.css
Module parse failed: Unexpected token (12:0)
You may need an appropriate loader to handle this file type.
| * Released on: February 22, 2019
| */
| .swiper-container {
| margin: 0 auto;
| position: relative;
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/pages/walMart/giftCardList.vue 67:0-37
@ ./src/pages/walMart/giftCardList.vue
@ ./src/routes.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

使用方式

<template>
  <swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOptions: {
             autoplay: true, // 自动轮播  
             speed: 1000,   // 轮播速度
              pagination: {
                  el: '.swiper-pagination'
              },
              on: {
                slideChangeTransitionEnd: function() {
                    // ...
                }
            }
          // Some Swiper option/callback...
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {
      console.log('Current Swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
    }
  }
</script> 

swiper配置选项可以参考：https://www.swiper.com.cn/api/grid/24.html

Swiper component API

<!-- All events/props support camelCase or kebab-case. -->
<swiper
  :options="swiperOptionsObject"
  :auto-update="true"
  :auto-destroy="true"
  :delete-instance-on-destroy="true"
  :cleanup-styles-on-destroy="true"
  @ready="handleSwiperReadied"
  @click-slide="handleClickSlide"
/>
 
<!-- vue-awesome-swiper converts all Swiper events into component/directive events, e.g.: -->
<swiper
  @slide-change-transition-start="onSwiperSlideChangeTransitionStart"
  @slideChangeTransitionStart="onSwiperSlideChangeTransitionStart"
  @slideChangeTransitionEnd="..."
  @transitionStart="..."
  ...
/>

interface IProps {
  // Auto update swiper when vue component `updated`
  autoUpdate?: boolean // default: true
  // Auto destroy swiper when vue component 'beforeDestroy'
  autoDestroy?: boolean // default: true
 
  // swiper.destroy's params
  // swiper.destroy(deleteInstanceOnDestroy, cleanupStylesOnDestroy)
  deleteInstanceOnDestroy?: boolean // default: true
  cleanupStylesOnDestroy?: boolean // default: true
}
 
// `@ready` event will emit when the Swiper instance mounted
function handleSwiperReadied(swiper: Swiper) {
  console.log('Swiper was munted!', swiper)
}
 
// `@click-slide` event has special treatment for Swiper's loop mode, which is still available in loop mode
function handleClickSlide(index: number, reallyIndex: number | null) {
  console.log('Click slide!', index, reallyIndex)
}

slideChangeTransitionEnd等监听回调API也可以直接写在swiperOptions的on属性里面。

swiper使用注意事项：

1，swiper设置loop循环无效
swiper设置loop循环无效，而且会使原本的手动滑动失效，这是因为最新的版本已经将loop: true替换为了autoplay: true，对于网上说的异步数据的问题是不存在的，自动轮播到每一帧可以异步请求后端数据再刷新。

2，事件监听回调
事件的话还是用on监听回调，不建议用@click来写点击事件，开启loop模式后点击是会失效的。配置项放在swiperOptions里面的，在on中写上tap的回调，可以实现slide的点击回调，使用click的话在移动端是有延迟的。

  swiperOption: {
      // ...
        on: {
          tap() {
            // ...
          },
        },
      }

3，this的指向问题
在on回调方法中this指向swiper对象，其他方法中需要使用this.$refs.mySwiper.swiper来引用（例如this.$refs.mySwiper.swiper.slideTo(index, 0)）。那么怎么在on回调方法中引用vue实例呢？在data中定义一个局部变量指向this，或者定义一个全局变量，然后在created中将其赋值为this。

4，样式污染
不要直接使用swiper-slide定义样式，单独写一个唯一的class，然后使用该class定义样式，保证不污染其他使用swiper的页面

<swiper-slide class="coupon-swiper-slide" v-for="(couponItem, index) in unUsedCouponArray" :key="index">
    <div class="qrcode-img-content">
        <img :src="couponItem.qrcodeImgUrl" class="bar-img" v-if="couponItem.qrcodeImgUrl.length > 0" />
        <p class="coupon-num" v-show="currentIndex === index">{{ couponItem.codeNo }}</p>
    </div>
</swiper-slide>

.coupon-swiper-slide {
    width: 100%;
    text-align: center;
    font-size: 18px;
    /* background: #fff; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    transition: 300ms;
}

.coupon-swiper-slide:not(.swiper-slide-active) {
    transform: scale(0.8);
}

5，在Android手机滑动没有放大效果
在…/common/css/swiper.css文件中修改

.swiper-container-android .swiper-slide,
.swiper-wrapper {
  /*-webkit-transform: translate3d(0px, 0, 0);*/
  /*transform: translate3d(0px, 0, 0);*/
}