这里使用的是swiper5
npm install swiper@5
main.js引入 import "swiper/css/swiper.min.css"
页面用
import Swiper from "swiper"; <div class="swiper-container" id="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in banners" :key="index">
<img :src="item.imgUrl" />
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
watch + nexttick
watch: {
banners: {
handler(newVal, oldVal) {
this.$nextTick(() => {
var mySwiper = new Swiper(".swiper-container", {
loop: true,
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
//点击小球的时候也切换图片
clickable: true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
//一页展示几张图片
slidesPerView: 1,
});
});
}
}
},
标签：轮播,watch,Swiper,swiper,使用,import,true,css From： https://www.cnblogs.com/sgj191024/p/17610285.html