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

• 一、vue-awesome-swiper的介紹
• 二、實(shí)現(xiàn)效果
• 三、實(shí)現(xiàn)步驟（坑多！）
• • 1.安裝Swiper
  • 2.注冊(cè)swiper組件
• 四、補(bǔ)充說明
• 總結(jié)

---

提示：
本文介紹是基于vue2.0實(shí)現(xiàn)，如果您是vue3.0建議直接去swiper上按照官方文檔使用哦。
Swiper官方地址：https://www.swiper.com.cn/

---

一、vue-awesome-swiper的介紹

首先，Swiper常用于移動(dòng)端網(wǎng)站的內(nèi)容觸摸滑動(dòng)

Swiper是純javascript打造的滑動(dòng)特效插件，面向手機(jī)、平板電腦等移動(dòng)終端，以及PC端網(wǎng)站。Swiper能實(shí)現(xiàn)觸屏焦點(diǎn)圖、觸屏Tab切換、觸屏多圖切換等常用效果。

而vue-awesome-swiper則是一個(gè)大佬封裝的關(guān)于Swiper的插件，能夠幫助我們?cè)趘ue的框架下更好地去使用Swiper實(shí)現(xiàn)輪播圖的各種效果

二、實(shí)現(xiàn)效果

三、實(shí)現(xiàn)步驟（坑多！）

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

1.安裝Swiper

// 版本問題！！大坑！vue中使用 swiper 需要使用 swiper 以及 vue-awesome-swipe // 這兩個(gè)的版本不能隨意更改，有對(duì)應(yīng)關(guān)系，我們只是為了實(shí)現(xiàn)效果，所以直接安裝特定版本 npm install swiper@5.4.1 vue-awesome-swiper@4.1.1 --save

2.注冊(cè)swiper組件

這里使用局部注冊(cè)的方法，實(shí)際應(yīng)用可根據(jù)需求自行選擇全局注冊(cè)或局部注冊(cè)

直接貼上我自定義的組件代碼（根據(jù)官方文檔更改的）：

// 組件使用說明： // 1、作用：含有縮略圖和主圖的組件 // 2、傳入?yún)?shù)：這里為了看效果，暫時(shí)沒寫props傳參，有不理解的可以搜索關(guān)于自定義組件中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代碼，可看注釋，有更多的需求直接去官網(wǎng)看，文章后面有貼官網(wǎng)地址 <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 samespaceBetween: 10,// 左右兩邊的點(diǎn)擊事件navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev'}},swiperOptionThumbs: {loop: true, // 是否可循環(huán)loopedSlides: 5, // looped slides should be the samespaceBetween: 10, // 縮略圖之間的間隙大小centeredSlides: true, // 大圖對(duì)應(yīng)的縮略圖位置顯示在中間slidesPerView: 5, // 每一頁顯示下方縮略圖的數(shù)量，auto ：自動(dòng)顯示所有數(shù)量；輸入number（如1、2、3等）則是手動(dòng)定義顯示的數(shù)量touchRatio: 0.2, // 觸控比例，可理解為拖動(dòng)縮略圖的距離，默認(rèn)值為1slideToClickedSlide: true //點(diǎn)擊其他縮略圖可跳轉(zhuǎn)}};},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>

到這里，基本效果已經(jīng)搞定，建議時(shí)間趕就無需理解太深，需要啥就去文檔看看提供的屬性字段即可。

四、補(bǔ)充說明

需要其他效果可以自行看文檔demo，查看對(duì)應(yīng)代碼塊，粘貼代碼即可

Demo文檔地址：https://github.surmon.me/vue-awesome-swiper/

Swiper的API文檔（可在這里查看需要的屬性字段說明等）：https://swiperjs.com/swiper-api

總結(jié)

官方文檔是基于vue3的使用，但我們項(xiàng)目基于vue2，找了很多資料，踩了好久的坑，記錄一下，希望對(duì)大家有所幫助。

總結(jié)

以上是生活随笔為你收集整理的基于vue2使用vue-awesome-swiper 轮播图（踩坑记录）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。