我們要使用的輪播插件：

①按照提示安裝插件

npm install vue-awesome-swiper --save

②全局引入插件俱两，在main.js中加入以下內(nèi)容奖蔓。

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

// require styles
import 'swiper/dist/css/swiper.css'

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

組件中引入插件

// require styles
import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}

由于我們?cè)诟鱾€(gè)頁面都可能會(huì)用到輪播插件儒老，因此我們選擇全局使用的方式來引入尺碰。

③插件的使用
Github上給出了插件的不同使用方式：

Difference（使用方法的異同）：
SSR and the only difference in the use of the SPA:
· SPA worked by the component, find swiper instance by ref attribute.
· SSR worked by the directive, find swiper instance by directive arg.
· Other configurations, events are the same.

以下為我們會(huì)用到的SPA的使用方式：

<!-- The ref attr used to find the swiper instance -->
<template>
  <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <!-- slides -->
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <swiper-slide>I'm Slide 4</swiper-slide>
    <swiper-slide>I'm Slide 5</swiper-slide>
    <swiper-slide>I'm Slide 6</swiper-slide>
    <swiper-slide>I'm Slide 7</swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
  </swiper>
</template>

<script>
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
          // some swiper options/callbacks
          // 所有的參數(shù)同 swiper 官方 api 參數(shù)
          // ...
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {
      // current swiper instance
      // 然后你就可以使用當(dāng)前上下文內(nèi)的swiper對(duì)象去做你想做的事了
      console.log('this is current swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
    }
  }
</script>

按照以上方法德澈，我們新建一個(gè)Swiper.vue文件,并且按照自己的需求進(jìn)行刪減和更改歇攻。

<template>
  <div class="wrapper">
      <swiper :options="swiperOption">
        <!-- slides -->
        <!-- 輪播頁面 簡(jiǎn)單的循環(huán)寫法-->
        <swiper-slide v-for="item of swiperList" :key="item.id">
          <img class='swiper-img' :src="item.imgUrl"/>
        </swiper-slide>
        <!-- Optional controls -->
        <!-- 頁面輪播順序圓點(diǎn) -->
        <div class="swiper-pagination"  slot="pagination"></div>
        <!-- 左右箭頭 -->
        <!-- <div class="swiper-button-prev" slot="button-prev"></div> -->
        <!-- <div class="swiper-button-next" slot="button-next"></div> -->
        <!-- 滾動(dòng)條 -->
        <!-- <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
      </swiper>
    </div>
</template>

<script>
export default{
  name: 'HomeSwiper',
  // 子組件里data是個(gè)函數(shù)，返回值是真正數(shù)據(jù)的內(nèi)容
  data(){
    return{
      // 由于swiper綁定了swiperOption,所以必須定義梆造，因此此處返回swiper綁定的數(shù)據(jù)
      swiperOption:{
        pagination: '.swiper-pagination',
        // 使最后一頁和第一頁可以循環(huán)
        loop: true,
      },
    }
  },
  props:{
    swiperList:Array
  }
}
</script>

<style scoped="">

  .wrapper >>> .swiper-pagination-bullet-active{
    background: #fff;
  }
  .swiper-img{
      /*完全顯示圖片*/
      width:100%;
  }
  .wrapper{
    /*防止抖動(dòng)*/
    overflow: hidden;
    width: 100%;
    height:0;
    padding-bottom: 31.25%;
    /*在圖片加載出來之前顯示灰色*/
    background:#eee;
  }

</style>

最后在home.vue中引入swiper這個(gè)組件缴守。

<template>
  <div>
    <home-header></home-header>
    <home-swiper :swiperList="swiperList"></home-swiper>
    <home-icons :iconList="iconList"></home-icons>
    <home-recommend :recommendList="recommendList"></home-recommend>
  </div>
</template>

<script>
import HomeHeader from './Home/components/Header'
import HomeSwiper from './Home/components/Swiper'
import HomeIcons from './Home/components/Icons'
import HomeRecommend from './Home/components/Recommend'
import axios from 'axios'
import { mapState } from 'vuex'

export default{
  name: 'Home',
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend
  }，
}
</script>