vue swiper 实现翻页
Vue 中使用 Swiper 实现翻页效果
安装 Swiper 依赖
确保项目已安装 swiper 和 vue-awesome-swiper（适用于 Vue 2/3）：
npm install swiper vue-awesome-swiper
# 或
yarn add swiper vue-awesome-swiper基础配置
在 Vue 组件中引入 Swiper 核心模块和分页模块：
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';模板结构
在模板中添加 Swiper 容器和分页占位符：
<template>
<swiper
:modules="[Pagination]"
:pagination="{ clickable: true }"
>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
</swiper>
</template>自定义分页样式
通过 CSS 覆盖默认样式（如需要）：
.swiper-pagination-bullet {
background-color: #333;
opacity: 0.5;
}
.swiper-pagination-bullet-active {
opacity: 1;
}高级配置选项
支持动态数据绑定和更多参数：
export default {
components: { Swiper, SwiperSlide },
setup() {
return {
slides: ['Content A', 'Content B', 'Content C'],
pagination: {
dynamicBullets: true,
renderBullet: (index, className) => {
return `<span class="${className}">${index + 1}</span>`;
}
}
};
}
};响应式处理
根据屏幕尺寸调整分页显示方式：
:breakpoints="{
640: { pagination: { type: 'progressbar' } },
1024: { pagination: { dynamicBullets: true } }
}"注意事项
- Swiper 7+ 需使用模块化导入方式
- 分页器位置可通过
pagination.el指定 DOM 元素 - 动态内容更新后需调用
swiperInstance.update()
