在vue项目中使用 swiper vue-awesome-swiper 插件实现无缝轮播

涉及到 vue-awesome-swiper 插件，这个插件适用于 Vue 的轮播组件，支持服务端渲染和单页应用。所以用来开发vue项目，很ok。但是值得注意的是，用这个开发移动端的话，有时候会有一点不流畅问题，关于ios和Android的兼容性问题。

• 使用之前现在项目中安装此插件

npm install vue-awesome-swiper --save

• 然后呢，就是在vue项目中引入此插件

全局引入。在 main.js 中引入

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.min.css'     // 引入css 文件

Vue.use(VueAwesomeSwiper)     // 全局使用

局部引入。只引入相关组件模块，在某一个需要使用swiper的页面中

//     引入样式文件
import 'swiper/dist/css/swiper.css'
//     然后引入相关模块
import { swiper, swiperSlide } from 'vue-awesome-swiper'

• 使用。图片无缝轮播

<template>
<swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(slide, index) in swiperSlides" :key="index">
        <img :src="slide.url">
      </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
  export default {
    data() {
      return {
        swiperSlides:[{url:require('./../../assets/1.jpg')}, 
         {url:require('./../../assets/2.jpg')},
         {url:require('./../../assets/5.jpg')}],    // 轮播的图片组
        swiperOption: {
          loop: true, // 循环
          pagination: {
            el: '.swiper-pagination'
          },
          on: {
            tap: function() {
            console.log(this) // 指向swiper对象
            }
          }
        }
      }
    }
  }
</script>

swiper 还可以用于做app启动的轮播图，等等。具体可以看swiper 的官方示例：https://www.swiper.com.cn/demo/index.html