vue-awesome-swiper 使用（踩坑記錄）

一、vue-awesome-swiper的介紹
二、實作效果
三、實作步驟（坑多！）
- 1.安裝Swiper
- 2.注冊swiper組件
四、補充說明
總結

提示：
本文介紹是基于vue2.0實作，如果您是vue3.0建議直接去swiper上按照官方檔案使用哦，
Swiper官方地址：https://www.swiper.com.cn/

一、vue-awesome-swiper的介紹

首先，Swiper常用于移動端網站的內容觸摸滑動

Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端，以及PC端網站，Swiper能實作觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果，

而vue-awesome-swiper則是一個大佬封裝的關于Swiper的插件，能夠幫助我們在vue的框架下更好地去使用Swiper實作輪播圖的各種效果

二、實作效果

在這里插入圖片描述

三、實作步驟（坑多！）

為了省略時間，不介紹有哪些坑了，直接說明如何使用，

1.安裝Swiper

// 版本問題！！大坑！vue中使用 swiper 需要使用  swiper 以及  vue-awesome-swipe 
// 這兩個的版本不能隨意更改，有對應關系，我們只是為了實作效果，所以直接安裝特定版本
npm install swiper@5.4.1 vue-awesome-swiper@4.1.1 --save

2.注冊swiper組件

這里使用區域注冊的方法，實際應用可根據需求自行選擇全域注冊或區域注冊

直接貼上我自定義的組件代碼（根據官方檔案更改的）：

// 組件使用說明：
// 1、作用：含有縮略圖和主圖的組件
// 2、傳入引數：這里為了看效果，暫時沒寫props傳參，有不理解的可以搜索關于自定義組件中props的用法
<template>
    <div class="thumb-example">
        <!-- swiper1 -->
        <swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
            <swiper-slide class="slide-1"></swiper-slide>
            <swiper-slide class="slide-2"></swiper-slide>
            <swiper-slide class="slide-3"></swiper-slide>
            <swiper-slide class="slide-4"></swiper-slide>
            <swiper-slide class="slide-5"></swiper-slide>
            <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
            <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
        </swiper>
        <!-- swiper2 Thumbs -->
        <swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
            <swiper-slide class="slide-1"></swiper-slide>
            <swiper-slide class="slide-2"></swiper-slide>
            <swiper-slide class="slide-3"></swiper-slide>
            <swiper-slide class="slide-4"></swiper-slide>
            <swiper-slide class="slide-5"></swiper-slide>
        </swiper>
    </div>
</template>

//js代碼，可看注釋，有更多的需求直接去官網看，文章后面有貼官網地址
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';

export default {
    name: 'swiper-example-thumbs-gallery',
    title: 'Thumbs gallery with Two-way control',
    components: {
        Swiper,
        SwiperSlide
    },
    data() {
        return {
            swiperOptionTop: {
                loop: true,
                loopedSlides: 5, // looped slides should be the same
                spaceBetween: 10,
                // 左右兩邊的點擊事件
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                }
            },
            swiperOptionThumbs: {
                loop: true, // 是否可回圈
                loopedSlides: 5, // looped slides should be the same
                spaceBetween: 10, // 縮略圖之間的間隙大小
                centeredSlides: true, // 大圖對應的縮略圖位置顯示在中間
                slidesPerView: 5, // 每一頁顯示下方縮略圖的數量，auto ：自動顯示所有數量；輸入number（如1、2、3等）則是手動定義顯示的數量
                touchRatio: 0.2, // 觸控比例，可理解為拖動縮略圖的距離，默認值為1
                slideToClickedSlide: true //點擊其他縮略圖可跳轉
            }
        };
    },
    mounted() {
        this.$nextTick(() => {
            const swiperTop = this.$refs.swiperTop.$swiper;
            const swiperThumbs = this.$refs.swiperThumbs.$swiper;
            swiperTop.controller.control = swiperThumbs;
            swiperThumbs.controller.control = swiperTop;
        });
    }
};
</script>

//樣式，自行更改即可
<style lang="less" scoped>
.thumb-example {
    width: 376px;
    height: 376px;
    background-color: #fff;
}

.swiper {
    margin-bottom: 10px;
    .swiper-slide {
        // background-size: cover;
        background-position: center;

        &.slide-1 {
            background-image: url('../../assets/TTImg/1.jpg'); //圖片地址
        }
        &.slide-2 {
            background-image: url('../../assets/TTImg/2.jpg'); //圖片地址
        }
        &.slide-3 {
            background-image: url('../../assets/TTImg/3.jpg'); //圖片地址
        }
        &.slide-4 {
            background-image: url('../../assets/TTImg/4.jpg'); //圖片地址
        }
        &.slide-5 {
            background-image: url('../../assets/TTImg/5.jpg'); //圖片地址
        }
    }

    &.gallery-top {
        height: 80%;
        width: 100%;
    }
    &.gallery-thumbs {
        height: 20%;
        width: 376px;
        box-sizing: border-box;
        padding: gap 0;
    }
    &.gallery-thumbs .swiper-slide { //等比例縮小
        opacity: 0.4;
        height: 68px;
        width: 68px;
        border: 1px solid #eee;
        background-size: contain;
    }
    &.gallery-thumbs .swiper-slide-active {
        opacity: 1;
    }
}
</style>