vue2中如何使用swiper@5.4.5
版本說明
about vue:
- 由于當前主流仍是vue2，所以本次使用vue2版本。
- 在博文最后，也會說明vue3版本的使用。
about swiper:
- 當前swiper已經到了7版本。
- 6版本及以上，已經支持了直接在前端框架中的使用。
- 6以下版本，不支持直接在前端框架中使用。
- 也就是說， 6以下版本，沒有
swiper-vue.js
about jquery:
- 由于使用swiper使用了固定的html內容，所以需要在html文件加載后，
- 才能使用swiper插件。
- 所以我們需要把配置內容，放在mounted里面：
<script>
import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意這里的引入
export default {
name: 'CarouselShow',
mounted() {
new Swiper('.swiper-container', {
autoplay: true,
loop: true,
// 其他配置...
})
}
}
</script>
用前準備
默認已經使用vue2創(chuàng)建了項目，此時需要安裝一些js庫：
yarn add swiper@5.4.5 // 注意版本，后面會介紹為啥選5.4.5
swiper的使用方法：
https://www.swiper.com.cn/usage/index.html
使用的時候，需要從這里拿基礎代碼。
代碼案例：
https://gitee.com/guozia007/test-swiper5.45
效果展示：
https://guozia007.gitee.io/test-swiper5.45/
swiper的api配置項：
https://www.swiper.com.cn/api/
使用swiper
此處直接在vue2給的HelloWord組件上進行修改，把原有代碼都刪除，換成
給定的代碼，即：
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide1">Slide 1</div>
<div class="swiper-slide swiper-slide2">Slide 2</div>
<div class="swiper-slide swiper-slide3">Slide 3</div>
</div>
<!-- 如果需要分頁器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要導航按鈕 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</template><script>
import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意這里的引入
export default {
name: 'HelloWorld',
mounted() {
var mySwiper = new Swiper('.swiper-container', {
// config...
})
}
}
</script><style scoped>
.swiper-container {
width: 500px;
height: 400px;
}
.swiper-slide {
text-align: center;
line-height: 400px;
color: #b0b0b0;
}
.swiper-slide1 {
background: red;
}
.swiper-slide2 {
background: blue;
}
.swiper-slide3 {
background: yellow;
}
</style>
此時，已經能用了。
然后是各種api的配置，根據(jù)自己的需要，來選擇不同的配置項。
主要配置項
loop
無限循環(huán)，即輪播到最后一張圖之后，點擊按鈕，是否接著輪播第一張圖。
默認為false 。表示不循環(huán)，即播放了最后一張，點擊按鈕無效，不會去播放第一張圖片。
設置為true，播放到最后一張，點擊按鈕后，會繼續(xù)播放第一張。
loop: true,speed
speed: 800, // 滾動一張或者切換一張圖片，需要的時間，單位ms，默認300ms
pagination
設置輪播圖中的小圓點
pagination: {
el: '.swiper-pagination',
},
配合著標簽使用：
<!-- 如果需要分頁器 --> <div class="swiper-pagination"></div>
輪播的圖片有幾張，就會出現(xiàn)幾個小圓點。
navigation
配置左右按鈕
// 如果需要前進后退按鈕
navigation: {
nextEl: '.swiper-button-next', // 右按鈕
prevEl: '.swiper-button-prev', // 左按鈕
},
配合標簽使用：
<!-- 如果需要導航按鈕 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div>
effect
改變輪播圖的效果
默認是一張一張的滑動輪播，
比如設置fade時，就可以讓圖片變成淡入淡出的方式進行輪播。
更多值可以查看api配置項。
autoplay
配置輪播圖的自動播放功能，即用戶不需要點擊，輪播圖會自動切換圖片
該屬性有兩種配置方式：
第一種是直接配置boolean值，即false或者true。
默認為true，即不自動播放。
如果配置為true，就會自動播放。
autoplay: true,
該配置相當于：
autoplay: {
delay: 3000, // 每次輪播間隔的ms數(shù)，默認3000ms
stopOnLastSlide: false, // 播放完最后一張圖片后是否停留在最后一張圖片上，停止繼續(xù)輪播。默認false
disableOnInteraction: true, // 用戶操作輪播圖后，比如點擊輪播按鈕或小圓點，停止輪播
}
第二種配置方法：
autoplay: {
delay: 3000, // 每次輪播間隔的ms數(shù)，默認3000ms
stopOnLastSlide: false, // 播放完最后一張圖片后是否停留在最后一張圖片上，停止繼續(xù)輪播。默認false
disableOnInteraction: true, // 用戶操作輪播圖后，比如點擊輪播按鈕或小圓點，停止自動輪播
}
其中，
stopOnLastSlide設置為true，播放完最后一張，會停止播放disableOnInteraction設置為false，用戶操作輪播圖后，不會停止自動輪播。
即：
autoplay: {
delay: 3000, // 每次輪播間隔的ms數(shù)，默認3000ms
stopOnLastSlide: false, // 播放完最后一張圖片后繼續(xù)輪播
disableOnInteraction: false, // 用戶操作輪播圖后，比如點擊輪播按鈕或小圓點，繼續(xù)自動輪播
}
修改swiper中輪播圖的樣式
直接按照類名修改相應css屬性即可。
比如設置寬高：
.swiper {
width: 500px;
height: 400px;
}
需要注意的是，如果原來的swiper類中，已經設置了某個屬性，
但是新屬性中又不需要這個屬性，就可以按照下面的例子來處理：
假定原來的.swiper默認樣式：
.swiper {
left: 0;
}
假定我們此時不需要這個left屬性，而是我們要自己定義一個right屬性：
.swiper {
left: unset;
right: 10px;
}
修改小圓點樣式
如果只修改小圓點顏色的話，
可以用
--swiper-pagination-color: #fff;
屬性去修改小圓點顏色。
該屬性不管style標簽里有沒有scoped屬性，都會生效。
需要特別注意的是，在vue中，如果通過類名修改小圓點樣式，
<style></style>這里面不能加scoped屬性，
不然無法修改小圓點樣式。
修改小圓點的樣式，需要單獨寫一個不帶scoped屬性的標簽。這樣才能確保新樣式生效。
比如就像這樣：
<style lang="less" scoped>
/*這里是其他標簽的樣式*/
</style>
<style lang="less">
/*小圓點的樣式，需要單獨寫一個不帶scoped屬性的style標簽*/
.swiper-pagination-bullet {
margin-left: 5px;
&.swiper-pagination-bullet-active {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
}
}
</style>
得到的效果就是這樣的：
分頁小圓點的相關配置項：
官方文檔：https://www.swiper.com.cn/api/pagination/362.html
// 配置項
pagination: {
el: '.swiper-pagination', // 包裹小圓點的類名，可自定義
clickable: true, // 點擊小圓點，也可以滾動輪播圖。默認false
type: 'bullets', // 分頁器樣式類型，默認bullets 圓點樣式
bulletElement: 'span', // 設置小圓點的標簽，默認為span
bulletClass: 'dot', // 修改小圓點類名，默認為swiper-pagination-bullet。
// 如果修改了該類名，就要自己寫相應的樣式了
bulletActiveClass: 'active', // 修改小圓點處于激活狀態(tài)時的類名，默認為swiper-pagination-bullet-active
}
swiper7的使用
swiper7在vue3中使用。
安裝：
yarn add swiper
swiper7不能在vue2中使用，
原因是，在swiper源碼中，引入的8個vue方法都是vue3中的方法，在vue2中不存在。
如果在vue2中使用swiper7，會報錯。
另外，vue3中使用swiper7，會有路徑上的坑。
比如引入時，需要自己修改引入路徑，不然會報錯。
依照官方文檔的引入方法為：
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper styles
import 'swiper/css';
而這樣的引入方式，vue會報錯找不到引入的模塊，
解決方法是，手動修改引入路徑，
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js';
// Import Swiper styles
import 'swiper/swiper.min.css';
正因為有這種坑，所以首選仍是6版本之前的swiper版本。
而6以前的最后一個穩(wěn)定版本就是5.4.5版本。也無需擔心這種坑的問題。
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了vue版日歷組件的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue中的config目錄下index.js解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue實現(xiàn)點擊關注后及時更新列表功能，本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
本文主要介紹了vue3實現(xiàn)問卷調查的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
這篇文章主要為大家詳細介紹了在Vue3組合式API中如何優(yōu)化列表渲染性能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-12-12
vue2.* element tabs tab-pane 動態(tài)加載組件操作
這篇文章主要介紹了vue2.* element tabs tab-pane 動態(tài)加載組件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue判斷字符串(或數(shù)組)中是否包含某個元素的多種方法
在我們前端日常開發(fā)中經常會遇到判斷一個字符串中是否包含某個元素的需求,下面這篇文章主要給大家介紹了關于Vue判斷字符串(或數(shù)組)中是否包含某個元素的多種方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
在開發(fā)過程中,我們經常需要將表格數(shù)據(jù)導出為 Excel 文件,大多數(shù)情況下,由后端處理即可,但是當數(shù)據(jù)量不大、需要快速響應用戶操作、或者數(shù)據(jù)已經在前端進行處理和展示時,前端該如何實現(xiàn)呢,本文將介紹兩種方法,需要的朋友可以參考下2024-09-09
這篇文章主要為大家介紹了vue3.x:報錯清單及解決記錄詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
前端vue?uni-app?cc-countdown倒計時組件使用詳解
cc-countdown是一個倒計時組件，它可以顯示剩余時間、天數(shù)、小時數(shù)、分鐘數(shù)和秒數(shù)，在本文中，我們將介紹如何在uni-app中使用cc-countdown組件,需要的朋友可以參考下2023-08-08