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'
     }
  })
}

                    

 

 

 

Logo

前往低代码交流专区

更多推荐