vue项目中使用swiper(swiper6)
vue项目中使用swiper,首先说下需要注意的地方火狐-- 低版本(如 47), swiper4、swiper5不支持, swiper3、swiper6支持swiper6的用法在vue中使用swiper6,当时,使用swiper6是因为项目需要兼容火狐版本47,swiper4和swiper5不支持,所以尝试使用swiper6,使用过程中遇到了很多问题(度娘出来后,看到大部分人都说swiper6很
·
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'
}
})
}
更多推荐
已为社区贡献1条内容
所有评论(0)