做個輪播碰到了不少坑,記錄一下。
這里主要是在html的基礎上用vue實現輪播功能
CDN
首先在lib文件夾上存放會用到的腳本,並在index文件中導入。由於圖片數據是通過接口獲得的,所以我這里使用了axios插件來幫助我獲取數據
<head>
//Vue相關腳本
<script src="./lib/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
//Swiper相關腳本
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
</head>
創建vue實例
<div id="app" class="main">
</div>
new Vue({
el:'#app',
data:{
//存放圖片數據
picList:[],
},
})
功能
這里是單純地實現輪播功能,於是我根據swiper的官方文檔只用了一部分,這里面的.swiper-slide
存放的是你想輪播的內容。由於我使用的是動態獲取數據,於是我修改了一下
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<!-- 修改后 -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,i) in picList" :key="i">
<img :src="item.url">
</div>
</div>
</div>
接口獲取數據的方法
methods:{
getPicList(){
//如果你需要傳參,可以在url后面加個對象`{}`,具體可以看axios官方文檔
axios.post('url')
.then( res=> {
//這里我過濾了url不為空的對象,使之組合成一個新的數組對象。你可以根據你自己返回的數據進行修改
this.picList=res.data.Data.filter(item=>{
return item.url!=="" })
}).catch(function (error) {
console.log('error');
});
},
}
初始化Swiper
//這是官方文檔的寫法
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical', // 垂直切換選項
loop: true, // 循環模式選項
})
//本實例我選擇用函數包裹寫在methods中,加定時器是解決loop失效的問題。其他的配置屬性建議去swiper的API文檔進行查看
initSwiper(){
setTimeout(()=>{
var mySwiper = new Swiper ('.swiper-container', {
loop: true,
direction:"horizontal",
speed:500,
autoplay :{
//防止拖拽后無法自動滑動
disableOnInteraction:false,
delay:4000
},
//防止拖拽后無法自動滑動
observer:true,
observeParents:true,
observeSlideChildren:true,
})
},300)
}
在生命鈎子上調用接口函數和初始化函數
mounted() {
this.getPicList()
this.initSwiper()
},
好啦!剩下的就是添加樣式了,祝你一切順利!