项目由vue2升级vue3遇到的问题之swiper

在vue3中使用Swiper8.4.7 

 vue-awesome-swiper 是 Vue 2 时代流行的 Swiper 封装库，但它 不兼容 Vue 3。官方也没有为 Vue 3 提供更新版本

Swiper 从 8.0.0 版本开始提供了原生的 Vue 3 支持，这是目前最推荐的方案：

如果你是从 Vue 2 迁移到 Vue 3，建议将 vue-awesome-swiper 替换为官方的 swiper/vue 组件

npm install swiper@latest

  "swiper": "8.4.7",

   "vue": "3.2.41",

 Swiper 8.4.7使用方式 

1. 引入方式

import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'

import SwiperCore, { Pagination, Navigation } from 'swiper'

// 引入Swiper样式

import 'swiper/swiper.min.css'

import 'swiper/modules/pagination/pagination.min.css'

import 'swiper/modules/navigation/navigation.min.css'

// 注册模块

SwiperCore.use([Pagination, Navigation])

2.获取实例方式

  Swiper 8.4.7 版本中，我们需要使用 onSwiper 事件来获取 Swiper 实例 @swiper="onSwiper"

<template>
  // ... existing code ...
  <swiper
    ref="menuListSwiper"
    :modules="menuListOption.modules"
    :navigation="menuListOption.navigation"
    :pagination="menuListOption.pagination"
    :slides-per-view="menuListOption.slidesPerView"
    :space-between="menuListOption.spaceBetween"
    class="swiper-container"
    @swiper="onSwiper"
  >
  // ... existing code ...
</template>

<script setup>
// ... existing code ...

// 添加 swiper 实例的 ref
const swiperInstance = ref(null)

// 修改 onSwiper 方法
const onSwiper = (swiper) => {
  console.log('swiper instance:', swiper)
  swiperInstance.value = swiper
}

const onleft = () => {
  if (swiperIndex.value === 0) {
    ElMessage({
      message: '这是第一张'
    })
    return
  }
  if (swiperIndex.value > 0 && swiperInstance.value) {
    swiperIndex.value -= 1
    swiperInstance.value.slideTo(swiperIndex.value, 0, true)
  }
}

const onright = () => {
  if (
    swiperIndex.value < picDataComputed.value.length - 1 &&
    swiperInstance.value
  ) {
    swiperIndex.value += 1
    swiperInstance.value.slideTo(swiperIndex.value, 0, true)
  }
}

// ... existing code ...

const menuListOption = {
  modules: [Navigation, Pagination],
  navigation: {
    enabled: true,
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },
  pagination: {
    enabled: true,
    clickable: true
  },
  slidesPerView: 'auto',
  spaceBetween: 9
}

<script>

核心功能

常用事件

swiper8.4.7完整示例

<template>
  <swiper
    :modules="modules"
    :slides-per-view="'auto'"
    :space-between="30"
    :centered-slides="true"
    :loop="true"
    :autoplay="{
      delay: 2500,
      disableOnInteraction: false
    }"
    :navigation="true"
    :pagination="{
      clickable: true,
      dynamicBullets: true
    }"
    :breakpoints="breakpoints"
  >
    <swiper-slide v-for="(slide, index) in slides" :key="index">
      {{ slide }}
    </swiper-slide>
  </swiper>
</template>

<script>
import { Autoplay, Navigation, Pagination } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

export default {
  components: { Swiper, SwiperSlide },
  setup() {
    return {
      modules: [Autoplay, Navigation, Pagination],
      slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4'],
      breakpoints: {
        640: { slidesPerView: 2 },
        768: { slidesPerView: 3 },
        1024: { slidesPerView: 4 }
      }
    }
  }
}
</script>

实例方法

const onSwiper = (swiper) => {
  // 常用方法
  swiper.slideNext()      // 下一张
  swiper.slidePrev()      // 上一张
  swiper.slideTo(2)       // 跳转到指定索引
  swiper.update()         // 更新Swiper
  swiper.destroy()        // 销毁Swiper
  
  // 属性访问
  console.log(swiper.activeIndex)  // 当前索引
  console.log(swiper.isBeginning)  // 是否在第一张
  console.log(swiper.isEnd)        // 是否在最后一张
}

swiper11 及以上版本 获取实例 方式  在 Vue3 中，我们需要通过 menuListSwiper.value.swiper 来获取 Swiper 实例

swiper官方地址

Swiper Vue.js Components

在 Vue 3 中使用 Swiper 11.0.3

要在 Vue 3 中使用 Swiper 11.0.3，你需要安装 Swiper 的核心库和 Vue 组件。以下是完整的步骤：

1. 安装 Swiper

首先，通过 npm 或 yarn 安装 Swiper：

npm install swiper@11.0.3
# 或者
yarn add swiper@11.0.3

2. 基本使用示例

创建一个简单的轮播组件：

<template>
  <div class="swiper-container">
    <swiper
      :modules="modules"
      :slides-per-view="3"
      :space-between="50"
      navigation
      :pagination="{ clickable: true }"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <swiper-slide v-for="(slide, index) in slides" :key="index">
        {{ slide }}
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
// 导入 Swiper 核心和所需模块
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation, Pagination } from 'swiper/modules'

// 导入 Swiper 样式
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

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

<style scoped>
.swiper-container {
  width: 100%;
  height: 300px;
}
</style>

3. 常用配置选项

Swiper 11.0.3 提供了许多配置选项：

<swiper
  :modules="modules"
  :slides-per-view="'auto'"
  :space-between="30"
  :centered-slides="true"
  :grab-cursor="true"
  :loop="true"
  :autoplay="{
    delay: 2500,
    disableOnInteraction: false
  }"
  navigation
  :pagination="{
    clickable: true,
    dynamicBullets: true
  }"
  :breakpoints="{
    640: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    768: {
      slidesPerView: 3,
      spaceBetween: 40
    },
    1024: {
      slidesPerView: 4,
      spaceBetween: 50
    }
  }"
>
  <!-- slides here -->
</swiper>

记得导入相应的模块：

import { Autoplay, EffectFade } from 'swiper/modules'

// 在 setup 中
return {
  modules: [Navigation, Pagination, Autoplay, EffectFade]
}

4. 注意事项

1. 样式导入：确保导入 Swiper 的核心样式和你使用的模块样式

2. 模块注册：所有使用的功能模块都需要在 modules 数组中注册

3. Vue 3 兼容性：Swiper 11.0.3 完全兼容 Vue 3

4. 响应式设计：使用 breakpoints 属性可以轻松实现响应式布局

5. 完整模块列表

Swiper 11.0.3 提供的模块包括：

• Navigation (导航按钮)

• Pagination (分页器)

• Scrollbar (滚动条)

• Autoplay (自动播放)

• Parallax (视差效果)

• Lazy (懒加载)

• EffectFade (淡入淡出效果)

• EffectCube (立方体效果)

• EffectFlip (翻转效果)

• EffectCoverflow (封面流效果)

• EffectCreative (创意效果)

• Thumbs (缩略图)

• Zoom (缩放)

• Controller (控制器)

• A11y (无障碍)

• History (历史导航)

• HashNavigation (哈希导航)

• Virtual (虚拟幻灯片)

• Keyboard (键盘控制)

• Mousewheel (鼠标滚轮)