這篇文章帶給大家的內容是關於vue中如何使用swiper輪播插件來實現輪播圖（程式碼分析），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
有時候我們需要在vue中使用輪播元件，如果是在vue元件中引入第三方元件的話，最好透過npm安裝，從而進行統一安裝套件管理。
申明：本文所使用的是vue.2x版本。
透過npm安裝外掛：
npm install swiper --save-dev
登入後複製
#在需要使用swiper的元件裡引入swiper，swiper的初始化放在mounted裡
Slider.vue原始碼：
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="../fixtures/sliders/t1.svg"/></div>
<div class="swiper-slide"><img src="../fixtures/sliders/t2.svg"/></div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<!--<div class="swiper-button-prev"></div>-->
<!--<div class="swiper-button-next"></div>-->
<!-- 如果需要滚动条 -->
<!--<div class="swiper-scrollbar"></div>-->
</div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import Swiper from 'swiper';
export default {
name: "Slider",
mounted(){
new Swiper ('.swiper-container', {
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滚动条
scrollbar: '.swiper-scrollbar',
})
}
}
</script>
<style scoped>
.swiper-container {
width: 100%;
margin: 0;
padding: 0;
}
.swiper-wrapper {
height: 200px;
}
.swiper-slide img {
max-width: 100%;
}
.swiper-slide {
text-align: center;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>登入後複製
運行效果：
接下來，我們對上面的程式碼進行重構，因為如果我們用css 選擇器作為Swiper 定位頁面上元素依據的話，假如在一個頁面上同時有兩個.slider-container,那麼這個元件就會亂套！我們要秉承低耦合的開發方式來重構我們的程式碼。
我們可以使用Vue提供的更精確的指明方式在元素中加入ref熟悉，然後在程式碼內部透過 this.$refs.引用名稱來引用。
這是Vue.js2.0後的編號，ref標記是標準的HTML屬性，它取代了Vue.js 1.x中v-ref的寫法
#要注意的是，如果改為動態綁定圖片，請參考：vue-cil和webpack中本地靜態圖片的路徑問題解決方案
我這裡將靜態資源檔案轉移到了static目錄下面。
重構後的程式碼如下：
<template>
<div>
<div class="swiper-container" ref="slider">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="slide in slides">
<router-link :to="{name:'BookDetail',params:{id:slide.id}}">
<img :src="slide.img_url"/>
</router-link>
</div>
</div>
</div>
</div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import Swiper from 'swiper'
export default {
name: "Slider",
data(){
return{
slides:[{id:1,img_url:'./static/sliders/t1.svg'},{id:2,img_url:'./static/sliders/t2.svg'}]
}
},
mounted(){
new Swiper (this.$refs.slider, {
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滚动条
scrollbar: '.swiper-scrollbar',
})
}
}
</script>登入後複製
這裡還沒有把元件完全獨立，裡面有資料定義，其實可以把這個數據作為一個參數傳遞進來，也就是元件之間資料傳遞。
Vue頁面跳轉傳參
透過路由傳參，在router/index.js中定義路由
export default new Router({
routes: [
{
name:'BookDetail',
path:'/books/:id',
component: BookDetail
}
]
})登入後複製
前面的輪播元件中已經定義了需要傳遞的路由參數
<router-link :to="{name:'BookDetail',params:{id:slide.id}}">
<img :src="slide.img_url"/>
</router-link>登入後複製
#參數接收介面BookDetail.vue
<template><p>
点击的是：<span v-text="id"></span></p></template><script>
export default {
name: "BookDetail",
data(){ return{
id:this.$route.params.id
}
},
props:[]
}</script><style scoped></style>登入後複製
如果傳遞參數太多，這樣的方式肯定不方便，那麼可以採用vuex，或是元件資料傳遞。
關於元件傳值可以參考：Vue 元件之間傳值
關於Vue-cli npm run build生產環境打包,本地無法開啟問題
之後每次執行：hs即可。
相關推薦：
jQuery自適應輪播圖外掛程式Swiper用法範例
使用swiper元件實作輪播廣告效果
Vue封裝Swiper實作圖片輪播效果的程式碼分享
以上是vue中如何使用swiper輪播插件來實現輪播圖（程式碼分析）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
