vue项目中使用swiper(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'
     }
  })
}