VUE中使用swiper --- vue-awesome-swiper（先搞一半）

项目中需要实现列表的翻页功能，使用的是swiper，没有在vue中用过swiper，记录一下。
正好把网页翻一下，方便后续使用。
原网址是github.com/surmon-chin…

1. 安装

npm install swiper vue-awesome-swiper --save

yarn add swiper vue-awesome-swiper

# 推荐的使用Swiper5
yarn add swiper@5.x vue-awesome-swiper

2. 全局注册

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

//  Swiper 6.x包含及以上
import 'swiper/swiper-bundle.css'

// 包含及小于 Swiper 5.x
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

3. 本地注册

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  }
}

4. 不同使用方法的区别

使用指令和使用组件只有一个不同：

• 组件通过ref属性寻找Swiper实例
• 指令通过arg指令寻找Swiper实例
• 其他的配置、事件都是一样的 点击这里可以查看两种方法的影响和在应用环境的区别

4.1 组件

<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: {
          pagination: {
            el: '.swiper-pagination'
          },
          // 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>

4.2 指令

<template>
  <div v-swiper:mySwiper="swiperOption">
    <div class="swiper-wrapper">
      <div class="swiper-slide" :key="banner" v-for="banner in banners">
        <img :src="banner">
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          },
          // ...
        }
      }
    },
    mounted() {
      console.log('Current Swiper instance object', this.mySwiper)
      this.mySwiper.slideTo(3, 1000, false)
    }
  }
</script>

5. Swiper组件API

<!-- 事件名和props都支持驼峰命名或者短横线隔开命名. -->
<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 Swiper事件都支持组件或指令的方法写法 例如：-->
<swiper
  @slide-change-transition-start="onSwiperSlideChangeTransitionStart"
  @slideChangeTransitionStart="onSwiperSlideChangeTransitionStart"
  @slideChangeTransitionEnd="..."
  @transitionStart="..."
  ...
/>

interface IProps {
  // 当vue组件'updated'时，swiper自动更新Auto update swiper when vue component `updated`
  autoUpdate?: boolean // default: true
  // 当vue组件'beforeDestroy'时，swiper自动销毁
  autoDestroy?: boolean // default: true

  // swiper.destroy's 参数
  // swiper.destroy(deleteInstanceOnDestroy, cleanupStylesOnDestroy)
  deleteInstanceOnDestroy?: boolean // default: true
  cleanupStylesOnDestroy?: boolean // default: true
}

// 当Swiper实例被挂载时，可以emit`@ready`方法 will emit when the Swiper instance mounted
function handleSwiperReadied(swiper: Swiper) {
  console.log('Swiper was munted!', swiper)
}

// `@click-slide` 事件对于Swiper的循环模式有特殊处理，在该模式下任然可用
function handleClickSlide(index: number, reallyIndex: number | null) {
  console.log('Click slide!', index, reallyIndex)
}

6. Swiper 指令API

Based on the exact same as the component API.

In the directive mode, the Swiper instance will be mounted in the parent's component context use the default name$swiper. In order to implement multiple swipers in a context, the directive has an additional name called instanceName API, through this API, you can easily control the name of each swiper mount context.

<div v-swiper="swiperOptionsObject" />
<div v-swiper:secondSwiper="swiperOptionsObject" />
<div v-swiper:[dynamicSwiperName]="swiperOptionsObject" />
<div v-swiper="swiperOptionsObject" instance-name="fourthSwiper" />

export dafault {
  data() {
    return {
      dynamicSwiperName: 'thirdSwiper'
    }
  },
  mounted() {
    console.log('Swiper instances:', this.$swiper, this.secondSwiper, this.thirdSwiper, this.fourthSwiper)
  }
}

Swiper API

7. Swiper's API and configuration can be used.

• EN Swiper events
• EN Swiper documentation
• ZH Swiper documentation

---

Custom Build with Swiper

import Vue from 'vue'
// Swiper 5.x
import { Swiper as SwiperClass, Pagination, Mousewheel, Autoplay } from 'swiper/js/swiper.esm'
// Swiper 6.x
import { Swiper as SwiperClass, Pagination, Mousewheel, Autoplay } from 'swiper/core'

import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'

// Swiper modules
SwiperClass.use([Pagination, Mousewheel, Autoplay])

// -------------------------------------------------

// Global use
Vue.use(getAwesomeSwiper(SwiperClass))

// -------------------------------------------------

// Or local component
const { Swiper, SwiperSlide } = getAwesomeSwiper(SwiperClass)
export default {
  components: {
    Swiper,
    SwiperSlide
  }
}

Custom Swiper plugin

import SwiperClass from 'swiper'

SwiperClass.use({
  name: 'pluginName',
  params: {
    pluginSwitch: false,
  },
  on: {
    init() {
      if (!this.params.pluginSwitch) return
      console.log('init')
    },
    // ...
  }
})

// Your Swiper or App bussiness component...

---

Changelog

Detailed changes for each release are documented in the release notes.

License

MIT