vue使用swiper轮播组件遇到的坑
vue中swiper轮播组件使用
- 问题由来
- （1）普通版本
- （2）组件版本
- 引入和使用
- 下载引入
- CDN引入
- npm安装
- 全局引入
- 组件引入
- 全文总结
问题由来
工作中需要使用轮播图，自己写的话耽误太多时间，使用插件最好，目前比较稳定好用的轮播插件swiper就这么被选了，不想看英文于是打开了中文文档，这也是坑的由来。
建议不要看中文文档，更新太慢，现在目前的swiper版本已经到达6，直接使用npm安装的也会是最新版，中文文档只更新到4，意味着没法参考使用方法，有问题网上也找不到。在此附上英文API=>swiper英文文档
网上随便找个资料你看到的一般有两种方式：
（1）普通版本
说白了就是直接在HTML里加div,有特定的class,看到这种就是基本普通版本使用方法。
（2）组件版本
组件版本就是使用的标签为,主要以vue组件使用方式为主，参数属性稍有不同，但大体使用是一样的。
接下来从安装和使用两个方面来看看这两个版本怎么用，本文是主要讲在vue里的使用，普通版本理论上讲适用于任何情况，毕竟前端想使用写HTML总是没错的：
引入和使用
不管怎么样引入方法都是一样的，三种方式：
下载引入
CDN引入
下载和CDN引入都是一个道理，用代码中script和link标签外部引用即可，如下所示：
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
</head>
<body>
...
<script src="dist/js/swiper-bundle.min.js"></script>
...
</body>
</html>
这种一般配合普通模式使用，看看代码：
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">slider1</div>
<div class="swiper-slide">slider2</div>
<div class="swiper-slide">slider3</div>
</div>
</div>
<script>
// 这里还有一个坑，要是在vue里使用CDN在全局的html内引入了文件，new Swiper前应该加个window.
// ！！！！注意注意，vue里new Swiper对象需一定要在生命周期钩子函数mouted()里初始化~！！！！
mounted() {
var mySwiper = new Swiper('.swiper-container', {
autoplay: true,//可选选项，自动滑动
.......//想要啥属性自己加
})
}
//如果你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
new Swiper('.swiper-container')
var mySwiper = document.querySelector('.swiper-container').swiper
mySwiper.slideNext();
</script>
npm安装
主要就是以swiper组件方式使用，安装命令：
//注意我这里使用的是vue-awesome-swiper，这个是基于swiper的vue使用的插件
npm install vue-awesome-swiper --save
安装好了，然后接下来开始正常使用，全局引入啊，组件引用什么的，两种方式，目的都是为了使用它：
全局引入
//在 main,js 里引入（全局）:
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
//接下来就坑了，下面这个代码这样子引入的css文件会报eslint错误，文件找不到，没安装eslint的话肯定css不生效
import 'swiper/dist/css/swiper.css'(css 不显示的问题可能就在这)
划重点：为什么你的css不生效呢，因为你安装的swiper版本是最新版的6，它引入的文件都变了，肯定找不到呀，网上很多搜出来教你用都是这么用的，你一用肯定就跟我一样出问题，所以正确的打开方式应该是:
import 'swiper/swiper-bundle.css'
这样子下来应该就没啥问题了，要是还有问题一定是版本的锅，可安装指定版本：
npm install vue-awesome-swiper@3 --save-dev
组件引入
接下来另一种组件内局部引用，全局没引用但是在使用插件的组件内引用：
import 'swiper/swiper-bundle.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
}
}
template:
<swiper :options="swiperOption">
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
script:
export default {
data() {
return {
swiperOption: {
// 所有的参数同 swiper 官方 api 参数一样
autoplay: {
delay: 3000,
disableOnInteraction: false
},
// slidesPerView: 2,
// centeredSlides: true,
// centeredSlidesBounds: true,
pagination: {
el: '.swiper-pagination'
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
loop: true
......
}
}
}
}
全文总结
目前遇到的就这些了，不管你采用哪一种方式引入都可以，任何事务都有两面性，插件给我们开发带来便利，但是它会不断更新维护给人制造坑，我们需要做的是不断的学习。有时间的话可以自己写组件，这样就不坑了哈哈哈。此文是我在使用swiper过程中遇到的问题小记,有问题欢迎指正！希望对大家有所帮助~