安装（指定版本）
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: {
// 父组件传进来的数据
List: {
type: Array
}
},
data () {
return {
swiperOption: {
// loop: true,//自动无缝循环，动态点击事件有问题
observer: true,
autoplay: {
disableOnInteraction: false,//默认为true，自动轮播过程中手动拖拽会停止自动轮播，改为false就不受手动影响
delay: 3000//自动轮播速度
},
slidesPerView: 3,//展示swiper-slide个数
spaceBetween: 10,//swiper-slide之间间距
slidesPerGroup: 1//自动轮播swiper-slide的个数
}
}
}
}
</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>
