安裝（指定版本）
npm install vue-awesome-swiper@3 --save-dev
（安裝別的版本報錯，恕我菜鳥解決不了那些報錯問題）
新建個組件
...<template>
<div class="swiperBox" >
<swiper :options="swiperOption" v-if='List.length > 0'>
<swiper-slide v-for="item in List" :key="item.id">
{{item.text}}
</swiper-slide>
</swiper>
</div>
</template>
<script>
export default {
name: 'swiperBox',
props: {
// 父組件傳進來的數(shù)據(jù)
List: {
type: Array
}
},
data () {
return {
swiperOption: {
// loop: true,//自動無縫循環(huán)，動態(tài)點擊事件有問題
observer: true,
autoplay: {
disableOnInteraction: false,//默認為true，自動輪播過程中手動拖拽會停止自動輪播，改為false就不受手動影響
delay: 3000//自動輪播速度
},
slidesPerView: 3,//展示swiper-slide個數(shù)
spaceBetween: 10,//swiper-slide之間間距
slidesPerGroup: 1//自動輪播swiper-slide的個數(shù)
}
}
}
}
</script>
<style scoped>
</style>
main.js文件添加內容
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
父組件引用剛剛新建的swiper組件
<template>
<div>
<swiper :List="List"></swiper>
</div>
</template>
<script>
import swiper from '@/components/swiper'
export default {
data () {
return {
List: []
}
},
components: {
swiper
}
}
</script>
