vue项目中使用swiper(swiper6)

最新推荐文章于 2025-02-18 15:28:48 发布

前端○萌妹

最新推荐文章于 2025-02-18 15:28:48 发布

阅读量1.5w

点赞数 2

分类专栏： vue+swiper 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/u014292161/article/details/109045045

版权

vue+swiper 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在Vue项目中使用Swiper6时遇到的问题及其解决方案，特别是针对Firefox低版本的兼容性问题。文章指出，由于swiper4和swiper5不支持Firefox47，选择了使用swiper6，并详细阐述了如何进行全局和局部引入，以及如何利用Swiper的use方法和Navigation组件。在使用过程中，作者提醒注意swiper6的一些变化，如组件化的属性。通过示例代码，演示了初始化swiper6的正确方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue项目中使用swiper,首先说下需要注意的地方

火狐-- 低版本(如 47), swiper4、swiper5不支持， swiper3、swiper6支持

swiper6的用法

在vue中使用swiper6,当时，使用swiper6是因为项目需要兼容火狐版本47，swiper4和swiper5不支持，所以尝试使用swiper6,使用过程中遇到了很多问题（度娘出来后，看到大部分人都说swiper6很坑）今天我们就来说说swiper

首先安装swiper(npm install swiper --save)
局部引入/全局引入

全局引入：在main.js中引入，方法如下

局部引入：在当前模块中引入，方法如下

import 'swiper/swiper-bundle.min.css'

//这里需要说明一下swiper6做了一些调整，在版本6当中，它把一些属性封装成了组件的形式，可以按需引入，如果你需要用到分页，则需要引入Pagination（如 import import  { Swiper, Pagination } from 'swiper'
）

import  { Swiper, Navigation } from 'swiper'

使用方法

这里只讲一下需要注意的地方，如下，其他的写法和swiper4、swiper5一样

//举个例子
initSwiper(){
  //swiper提供了use方法，其他写法没有啥区别和swiper4、5一样
  Swiper.use([Navigation])
  this.monthSwiper = new Swiper('.monthSwiper', {
     navigation: {
       nextEl: '.swiper-button-next',
       prevEl: '.swiper-button-prev'
     }
  })
}