在开发过程中,经常会用到轮播图,那就有必要准备一个通用的轮播图组件,我是借助swiper插件的,下面是轮播图组件
<template>
<div class="swiper-container" ref="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in carouselList" :key="item.id">
<img :src="item.imgUrl" alt="">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</template>
<script>
import Vue from "vue";
import Swiper from "swiper";
export default {
name:'Carousel',
props: {
carouselList: [],
},
watch: {
//监听carouselList状态发生变化
carouselList: {
//carouselList状态发生变化了
handler() {
Vue.nextTick(() => {
new Swiper(this.$refs.swiper, {
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable:true
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
}
});
});
},
},
},
};
</script>
写完轮播图组件后,还要在入口文件main.js中将其注册为全局组件,最后在入口文件中引入swiper.css
注意:我这里使用的是swiper@5.4.5,swiper最新的版本不适用这段代码
网友评论