》swiper 使用的 9.2.0版本
<template>
<div
v-show="gridInfoList.length > 0"
class="swiper"
>
<div class="swiper-wrapper">
<GridMember
v-for="(item, index) in gridInfoList"
:key="index"
class="swiper-slide"
:gridInfo="item"
/>
</div>
<div class="swiper-pagination" />
</div>
</template>
<script lang="javascript">
import Swiper, { Autoplay, Pagination } from 'swiper';
import 'swiper/swiper.scss';
import 'swiper/modules/pagination/pagination.scss';
mounted () {
// 这里要注意，swiper 容器的类名必须用 swiper
new Swiper('.swiper', {
speed: 500,
spaceBetween: 50,
autoplay: {
delay: 5000,
disableOnInteraction: false,
pauseOnMouseEnter: true
},
/**
这里是你需要引入的一些功能，自动轮播、小圆点分页符、左右切换按钮，同时需要引入对应的样式。
自动轮播不需要单独引入样式
*/
modules: [Autoplay, Pagination],
slidesPerView: 1,
loop: true,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
}
});
}
</script>
