vue2中使用swiper轮播图
时间: 2023-11-01 20:07:54 浏览: 28
1. 安装swiper
```
npm install swiper --save
```
2. 引入swiper
在需要使用swiper的组件中引入swiper:
```javascript
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'
```
3. 初始化swiper
在mounted生命周期中初始化swiper:
```javascript
mounted () {
this.mySwiper = new Swiper('.swiper-container', {
// swiper配置项
})
}
```
其中,`.swiper-container`是包含swiper的容器类名,swiper配置项可以参考swiper官方文档。
4. 编写轮播图模板
在模板中使用swiper:
```html
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="...">
</div>
<div class="swiper-slide">
<img src="...">
</div>
...
</div>
<div class="swiper-pagination"></div>
</div>
</template>
```
其中,`.swiper-wrapper`是包含swiper子元素的容器类名,`.swiper-slide`是swiper的子元素类名,`.swiper-pagination`是分页器类名,可以在swiper配置项中进行配置。
5. 销毁swiper
在组件销毁时销毁swiper:
```javascript
beforeDestroy () {
if (this.mySwiper) {
this.mySwiper.destroy()
}
}
```
完整的示例代码:
```html
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="...">
</div>
<div class="swiper-slide">
<img src="...">
</div>
...
</div>
<div class="swiper-pagination"></div>
</div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'
export default {
mounted () {
this.mySwiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loop: true,
})
},
beforeDestroy () {
if (this.mySwiper) {
this.mySwiper.destroy()
}
}
}
</script>
```