vue swiper 实现翻页

vue swiper 实现翻页

在 Vue 中使用 Swiper 实现翻页功能，需要安装 Swiper 库并正确配置。以下是具体实现方法：

安装 Swiper 依赖

确保项目中已安装 Swiper 和 Vue-Awesome-Swiper（Vue 专用封装库）：

npm install swiper vue-awesome-swiper

基础翻页实现

1. 导入 Swiper 组件及样式
   在 Vue 组件中引入 Swiper 核心模块和分页模块：

   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { Pagination } from 'swiper';
   import 'swiper/css';
   import 'swiper/css/pagination';

2. 模板结构
   使用 swiper 和 swiper-slide 标签构建轮播内容：

   <template>
     <swiper
       :pagination="pagination"
       :modules="modules"
     >
       <swiper-slide>Slide 1</swiper-slide>
       <swiper-slide>Slide 2</swiper-slide>
       <swiper-slide>Slide 3</swiper-slide>
     </swiper>
   </template>

3. 配置分页参数
   在 script 部分定义分页配置和模块：

   export default {
     components: { Swiper, SwiperSlide },
     setup() {
       const pagination = {
         clickable: true,
         dynamicBullets: true
       };
       const modules = [Pagination];
       return { pagination, modules };
     }
   };

自定义分页样式

通过 CSS 覆盖默认样式：

.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #ccc;
}
.swiper-pagination-bullet-active {
  background: #007aff;
}

进阶配置（自动播放+循环）

扩展配置支持自动翻页和循环模式：

const pagination = {
  clickable: true,
  renderBullet: (index, className) => {
    return `<span class="${className}">${index + 1}</span>`;
  }
};
const modules = [Pagination, Autoplay];
const autoplay = {
  delay: 2500,
  disableOnInteraction: false
};

响应式断点设置

根据屏幕宽度调整分页行为：

const breakpoints = {
  640: {
    pagination: { dynamicBullets: false }
  },
  1024: {
    pagination: { clickable: false }
  }
};

注意事项

• Swiper 7+ 版本需使用模块化导入方式
• 分页器位置可通过 pagination.el 指定目标 DOM 元素
• 动态数据加载需调用 swiperInstance.update() 方法