vue中使用swiper组件，实现鼠标滚轮操作全屏切换
1. 首先在项目内安装swiper
```
npm install swiper@4.4.2 -D
```
2. 安装Vue-awesome-swiper,用来操作Swiper
```
npm install vue-awesome-swiper@3.1.3 -D
```
3. 安装成功后，在项目main.js全局引入swiper，将其挂载上去
```
//引入swiper
import VueAwesomeSwiper from “vue-awesome-swiper“；
// 引入swiper样式
import "swiper/dist/css/swiper.css";
//挂载swiper
Vue.use(VueAwesomeSwiper);
```
4. 在组件中引用swiper
```
<template>
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<swiper-slide>I'm Slide 4</swiper-slide>
<swiper-slide>I'm Slide 5</swiper-slide>
<swiper-slide>I'm Slide 6</swiper-slide>
<swiper-slide>I'm Slide 7</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</template>
<script>
export default {
data () {
return {
swiperOption: {
direction: 'vertical',
slidesPerView: 1,
spaceBetween: 30,
mousewheel: true,
autoHeight: true,
height: window.innerHeight,
pagination: {
el: '.swiper-pagination',
clickable: true
}
}
}
},
computed: {
swiper () {
return this.$refs.mySwiper.swiper
}
}
}
</script>
<style lang="scss" scoped>
.swiper-container {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
}
</style>
```
6. 总结
在vue中使用swiper，先要安装、引入、配置。在配置中可以有选择的按照自己的需求配置相关参数，具体参数参照swiper官方api文档。在templete中引入时，需要注意将标签放在最外层，这样才会正常显示效果。
