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 samespaceBetween: 10,// 左右兩邊的點擊事件navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev'}},swiperOptionThumbs: {loop: true, // 是否可循環loopedSlides: 5, // looped slides should be the samespaceBetween: 10, // 縮略圖之間的間隙大小centeredSlides: true, // 大圖對應的縮略圖位置顯示在中間slidesPerView: 5, // 每一頁顯示下方縮略圖的數量，auto ：自動顯示所有數量；輸入number（如1、2、3等）則是手動定義顯示的數量touchRatio: 0.2, // 觸控比例，可理解為拖動縮略圖的距離，默認值為1slideToClickedSlide: 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>

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

四、補充說明

需要其他效果可以自行看文檔demo，查看對應代碼塊，粘貼代碼即可

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

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

總結

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。