》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
},
/**
這里是你需要引入的一些功能皇钞，自動輪播嘿架、小圓點分頁符、左右切換按鈕栅屏，同時需要引入對應(yīng)的樣式飘千。
自動輪播不需要單獨引入樣式
*/
modules: [Autoplay, Pagination],
slidesPerView: 1,
loop: true,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
}
});
}
</script>
