vue-awesome-swiper輪播插件

1. github上搜索vue-awesome-swiper

2. readme中有安裝方法，建議在插件名後@版本號，使用穩定的老版本 npm install vue-awesome-swiper@x.x.x --save 

3. 在項目main.js中引入

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

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

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

4.建立單文件組件Swiper.vue（單文件組件三部分template、script、style）

<template>
    <swiper :options="swiperOption">
        <!-- slides -->
　　　　 //這裏是輪播的內容
        <swiper-slide>I'm Slide 1</swiper-slide>
        <swiper-slide>I'm Slide 2</swiper-slide>
        <swiper-slide>
　　　　　　<img src=""/>
　　　　  </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: 'HomeSwiper',
    // 子組件的data必須是個函數
    data() {
        return {
            swiperOption: {}
        }
    },
}
</script>

<style lang="stylus" scoped>
  
</style>

5. 在別的頁面中引用，如在Home.vue

<template>
    <div>
        <home-header></home-header>
        <home-swiper></home-swiper>
    </div>
</template>

<script>
import HomeHeader from './component/Header'
import HomeSwiper from './component/Swiper'
export default {
    name: 'Home',
    components: {
        HomeHeader,
        HomeSwiper
    }

}
</script>

<style lang="stylus">
  
</style>

6.防抖動：在網速很差的狀況下，swiper未加載出前，下方的div會佔據，等到swiper出來時，佔據位置的div會蹦走

處理方法：swiper外層嵌套div，讓這個div撐開高度

<template>
    <div class="wrapper">
        <swiper :options="swiperOption">
            ...
        </swiper>
    </div>
</template>

<script>
    ...
</script>

<style lang="stylus" scoped>
  .wrapper
    overflow: hidden
    width:100%
    height:0
    padding-bottom: 31.25%   (寬高比,若是寫在height，那麼是和父級元素的高度,不是對比wrapper的寬度)
</style>

7.輪播圖下面跟着跑的一排小圓點

<template>
    <div class="wrapper">
        <swiper :options="swiperOption">
            <!-- 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>
    </div>
</template>

<script>
export default {
    name: 'HomeSwiper',
    // 子組件的data必須是個函數
    data() {
        return {
            swiperOption: { pagination: 'swiper-pagination' }
        }
    },
}
</script>

<style lang="stylus" scoped>
  //三個箭頭是穿透，這樣就突破了scoped的限制 //這個class名從何而來，是從頁面中審查元素獲得的 .wrapper >>> .swiper-pagination-bullet-active background: red !important
  .wrapper
    overflow: hidden
    width:100%
    height:0
    padding-bottom: 31.25%   (寬高比,若是寫在height，那麼是和父級元素的高度,不是對比wrapper的寬度)
</style>

8.Vue是數據驅動的框架，輪播的圖片地址和數量不應固定寫死

處理方法：v-for循環item，注意循環要加key

<template>
    <div class="wrapper">
        <swiper :options="swiperOption">
            <!-- slides -->
            <swiper-slide v-for="item of swiperList" :key="item.id">
　　　　　　　　　　<img :src="item.imgUrl" />
　　　　　　　</swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
export default {
    name: 'HomeSwiper',
    // 子組件的data必須是個函數
    data() {
        return {
            swiperOption: {
                pagination: 'swiper-pagination'
            },
            swiperList: [{ id: '0001', imgUrl: 'http://lkadand.adoaidiajd.jada.jpg' }, { id: '0002', imgUrl: 'jndakm.adkand.sda.jpg' }]
        }
    },
}
</script>

<style lang="stylus" scoped>
  //三個箭頭是穿透，這樣就突破了scoped的限制
  //這個class名從何而來，是從頁面中審查元素獲得的
  .wrapper >>> .swiper-pagination-bullet-active
    background: red !important
  .wrapper
    overflow: hidden
    width:100%
    height:0
    padding-bottom: 31.25%   (寬高比,若是寫在height，那麼是和父級元素的高度,不是對比wrapper的寬度)
</style>

9.循環輪播

處理方法：加loop值爲true

<template>
    <div class="wrapper">
        <swiper :options="swiperOption">
            <!-- slides -->
            <swiper-slide v-for="item of swiperList" :key="item.id"><img :src="item.imgUrl" /></swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
export default {
    name: 'HomeSwiper',
    // 子組件的data必須是個函數
    data() {
        return {
            swiperOption: {
                pagination: 'swiper-pagination',
                loop: true
            },
            swiperList: [{ id: '0001', imgUrl: 'http://lkadand.adoaidiajd.jada.jpg' }, { id: '0002', imgUrl: 'jndakm.adkand.sda.jpg' }]
        }
    },
}
</script>

<style lang="stylus" scoped>
  //三個箭頭是穿透，這樣就突破了scoped的限制
  //這個class名從何而來，是從頁面中審查元素獲得的
  .wrapper >>> .swiper-pagination-bullet-active
    background: red !important
  .wrapper
    overflow: hidden
    width:100%
    height:0
    padding-bottom: 31.25%   (寬高比,若是寫在height，那麼是和父級元素的高度,不是對比wrapper的寬度)
</style>