1.引包
说明:导入相应js引css
import "Swiper" from "swiper"
import "swiper/css/swiper.css";
import "swiper/js/swiper";
2.结构
说明:必要的结构使用;直接封装成一个组件
html
<template>
<div class="swiper-container" ref="cur">
<div class="swiper-wrapper">
<div
class="swiper-slide"
v-for="carousel in list"
:key="carousel.id"
>
<img :src="carousel.imgUrl" />
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</template>
3.new Swiper实例
说明:(页面当中务必要有结构);注释已经写入代码。
第一:可以解决获取数据在Swiper实例之前;第二:可以解决v-for遍历完后在Swiper之前。
javascript
import Swiper from "swiper";
export default {
name: "Carousel",
props: ["list"],
// 这样做的目的是在list属性发生变化时,
// 能够及时更新Swiper轮播组件,以保证轮播的内容和效果与list属性的变化保持同步。
watch: {
list: {
immediate: true,
handler(newValue, oldValue) {
// 这里有了数据还是不行,v-for有没有渲染也是问题,不能保证结构是否完成。
// 用于在DOM更新后执行回调函数。在Vue中,当对数据进行修改后,DOM并不会立即更新,而是在下一个"tick"时进行更新。
// 这个"tick"是Vue内部的更新队列,在执行用户逻辑之前进行DOM更新。
this.$nextTick(function () {
const mySwiper = new Swiper(this.$refs.cur, {
loop: true,
slidesPerView: "auto",
slidesPerGroupAuto: true,
autoplay: true,
//如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable: true,
//如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
},
});
});
},
},
},
};