Vue3使用Swiper Vue

1.安装

npm形式

 npm install swiper
 
 //安装好以后版本应该是11

2.引用

2.1 局部引用

因为swiper vue采用模块化的设计，所以我们先引用核心模块，其他模块用到了在引用。

 //引入核心模块
 import { Swiper, SwiperSlide } from 'swiper/vue';
 //引入基本样式
 import 'swiper/css';

3.使用

这里做一个简单的demo

 <template>
   <swiper
     @swiper="onSwiper"
     @slide-change="onSlideChange"
   >
     <swiper-slide v-for="(item, index) in advertList" :key="item.id">
       <img
         :style="{ display: 'block', width: '100%', height: 'auto' }"
         :src="item.url"
         alt="advert"
       />
     </swiper-slide>
   </swiper>
 </template>
 <script setup lang="ts">
 //引入核心模块
 import { Swiper, SwiperSlide } from 'swiper/vue';
 //引入核心模块样式
 import 'swiper/css';
 </script>

3.1模块引入

swiper vue将很多的内容按照模块封装起来了，如果要使用需要单独引用。这里我们引入分页器和自动播放模块，做一个简单的轮播图功能。

下面是暴露的一些模块，具体的可以看相关文档：Swiper Vue.js Components (swiperjs.com)

Virtual - Virtual Slides module
Keyboard - Keyboard Control module
Mousewheel - Mousewheel Control module
Navigation - Navigation module
Pagination - Pagination module
Scrollbar - Scrollbar module
Parallax - Parallax module
FreeMode - Free Mode module
Grid - Grid module
Manipulation - Slides manipulation module (only for Core version)
Zoom - Zoom module
Controller - Controller module
A11y - Accessibility module
History - History Navigation module
HashNavigation - Hash Navigation module
Autoplay - Autoplay module
EffectFade - Fade Effect module
EffectCube - Cube Effect module
EffectFlip - Flip Effect module
EffectCoverflow - Coverflow Effect module
EffectCards - Cards Effect module
EffectCreative - Creative Effect module
Thumbs - Thumbs module

 <script setup lang="ts">
 //导入你需要的模块
 import { Pagination, Autoplay } from 'swiper/modules';
 //导入模块样式
 import 'swiper/css/pagination';
 </script>

3.2模块使用

引入模块以后，绑定到swiper的modules上即可，然后就可以对照配置项文档进行一些自定义的设置。中文api - Swiper中文网

 <template>
   <swiper
     :modules="modules"
     //开启分页器
     :loop="true"
     :pagination="true"
     :autoplay="{
       delay: 4000,
       //鼠标置于swiper时，停止自动播放，鼠标离开时恢复自动切换
       pauseOnMouseEnter: true,
       //用户操作swiper之后，是否禁止autoplay
       disableOnInteraction: false
     }"
     @swiper="onSwiper"
     @slide-change="onSlideChange"
   >
     <swiper-slide v-for="(item, index) in advertList" :key="item.id">
       <img
         :style="{ display: 'block', width: '100%', height: 'auto' }"
         :src="item.url"
         alt="advert"
       />
     </swiper-slide>
   </swiper>
 </template>
 <script setup lang="ts">
 //导入核心模块
 import { Swiper, SwiperSlide } from 'swiper/vue';
 //导入核心模块样式
 import 'swiper/css';
 //导入分页器和自动播放模块
 import { Pagination, Autoplay } from 'swiper/modules';
 //导入分页器样式
 import 'swiper/css/pagination';
 //使用模块
 const modules = [Autoplay, Pagination];
 </script>

3.3 获取swiper实例

swiper的实例可以在@swiper事件中获取

 <template>
   <swiper
     :modules="modules"
     //开启分页器
     :loop="true"
     :pagination="true"
     :autoplay="{
       delay: 4000,
       //鼠标置于swiper时，停止自动播放，鼠标离开时恢复自动切换
       pauseOnMouseEnter: true,
       //用户操作swiper之后，是否禁止autoplay
       disableOnInteraction: false
     }"
     @swiper="onSwiper"
     @slide-change="onSlideChange"
   >
     <swiper-slide v-for="(item, index) in advertList" :key="item.id">
       <img
         :style="{ display: 'block', width: '100%', height: 'auto' }"
         :src="item.url"
         alt="advert"
       />
     </swiper-slide>
   </swiper>
 </template>
 <script setup lang="ts">
 let swiperInstance: SwiperType;
 
 const onSwiper = (swiper: any) => {
   //获取swiper实例，可以用于自己的一些业务逻辑
   swiperInstance = swiper;
 };
 </script>

3.4 修改样式

这里以修改分页器样式为例，如果你想强制修改一些样式，可以用::v-deep。

 <style scoped>
 /* 修改未激活状态下的分页器圆点颜色和样式 */
 ::v-deep .swiper-pagination-bullet {
   background-color: #b4b2b2;
   width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
   height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 4px));
   border-radius: var(--swiper-pagination-bullet-border-radius, 4px);
 }
 
 /* 修改激活状态下的分页器圆点颜色和样式 */
 ::v-deep .swiper-pagination-bullet-active {
   background-color: #ffffff;
   width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 14px));
 }
 </style>

vue3使用swiper vue