vue swiper 轮播实现

Vue Swiper 轮播实现

安装 Swiper 依赖

确保项目已安装 Swiper 和 Vue-Awesome-Swiper 库。通过 npm 或 yarn 安装：

npm install swiper vue-awesome-swiper
# 或
yarn add swiper vue-awesome-swiper

引入 Swiper 组件

在 Vue 组件中引入 Swiper 核心模块和样式：

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

基础轮播实现

在模板中使用 <swiper> 和 <swiper-slide> 标签：

<template>
  <swiper
    :slides-per-view="3"
    :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide v-for="(item, index) in slides" :key="index">
      {{ item }}
    </swiper-slide>
  </swiper>
</template>

添加导航和分页

引入导航和分页模块并配置：

import { Navigation, Pagination } from 'swiper/modules';

export default {
  components: { Swiper, SwiperSlide },
  setup() {
    const onSwiper = (swiper) => console.log(swiper);
    const onSlideChange = () => console.log('slide change');
    return {
      modules: [Navigation, Pagination],
      onSwiper,
      onSlideChange,
      slides: ['Slide 1', 'Slide 2', 'Slide 3']
    };
  }
};

自定义样式和配置

通过 :options 传递 Swiper 配置对象：

<swiper
  :modules="modules"
  :slides-per-view="1"
  :pagination="{ clickable: true }"
  :navigation="true"
>
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 2</swiper-slide>
</swiper>

响应式配置

使用 breakpoints 实现不同屏幕尺寸适配：

const swiperOptions = {
  breakpoints: {
    640: { slidesPerView: 2 },
    768: { slidesPerView: 3 },
    1024: { slidesPerView: 4 }
  }
};

自动播放和循环

添加 autoplay 和 loop 模块：

import { Autoplay } from 'swiper/modules';

modules: [Autoplay],
autoplay: { delay: 3000 },
loop: true

注意事项

• Swiper 的 CSS 文件需全局引入（如在 main.js 中）。
• 动态数据更新时，调用 swiper.update() 方法确保渲染正确。
• 移动端需添加 touch-events 相关 polyfill 以兼容旧浏览器。