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()