最近公司首页做改造升级，由原先的长图变成轮播，当时觉得搞个插件很快解决，没想到一个插件经历了很多坑。话不多说，直接上demo
第一步：安装依赖 cnpm install [email protected] --save, cnpm install [email protected] --save 注意版本不同可能会存在配置语法不同，大家注意这一个坑
第二步：局部引用或全局引用组件，我在项目中采用的是局部引用
<script>
import { swiper, swiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
components: {
swiper,
swiperSlide
},
directives: {
swiper: directive
},
data() {
return {
url: '',
bannerList: [],
swiperOption: {
observer: true, // 修改swiper自己或子元素时，自动初始化swiper
observeParents: true, // 修改swiper的父元素时，自动初始化swiper
centeredSlides: true,
autoplay: 3500,//轮播时间间隔
autoplayDisableOnInteraction: false,//点击分页后，重新启动autoplay
loop: true,//循环
pagination: '.swiper-pagination',//显示小圆点
paginationClickable: true,//控制圆点分页点击可控
}
}
},
}
</script>
第三步：在模板中使用组件
<template>
<div>
<swiper
v-if="bannerList.length>0"
ref="mySwiper"
:options="swiperOption"
:auto-destroy="true"
>
<swiper-slide v-for="(item,index) in bannerList" :key="index">
<img :src="`${url}/${item.coverImg}`" />
</swiper-slide>
<div slot="pagination"></div>
<!-- <div slot="button-prev"></div>
<div slot="button-next"></div> -->
</swiper>
</div>
</template>
第四步：修改一些样式，达到自己想要的效果
<style lang="less" scoped>
.swiper-slide{
width:1920px;
height:340px;
text-align:center;
img{
width:1920px;
height:340px;
}
}
</style>
作者：隋元超