Vue中使用swiper轮播图的正确姿势

相信很多朋友都和我一样在Vue中使用swiper遇到过很多问题，首先swiper轮播图，确实很强大，集成了各种功能，几乎包含了各类型轮播图的需求，点击切换，鼠标滚轮控制切换等交互做的也是很完善，还可以做H5的一屏动画页面，滑动翻页等。

因为swiper大部分版本和Vue的兼容性并没有那么好，在Vue中转JS的写法又太麻烦，通过查找方案，发现安装时将swiper版本锁定在3便可解决。

安装vue,一定要标明版本， 安装过其他版本的要先卸载哦

npm install swiper@3 --save-dev

或：（一般第一种即可，下面实例便是第一种方法安装）

npm i swiper@3.4.2 -S

全局引入，写在main.js，如果不需要全局引入可以不写

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import 'swiper/dist/css/swiper.min.css'
import 'swiper/dist/js/swiper.min'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

示例代码，安装好后全选复制到你的页面即可，此案例为局部引入，无需在main,js中引入

<template>
	<div class="about">
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">Slide 1</div>
				<div class="swiper-slide">Slide 2</div>
				<div class="swiper-slide">Slide 3</div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>

			<!-- 如果需要导航按钮 -->
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>

			<!-- 如果需要滚动条 -->
			<!--    <div class="swiper-scrollbar"></div>-->
		</div>
	</div>
</template>

<script>
// 局部引入swiper,如果在main.js中引入过,以下三行可不写	
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import 'swiper/dist/js/swiper.min';
// --------------------E-ND--------------
export default {
	name: 'About',
	data() {
		return {};
	},
	mounted() {
		new Swiper('.swiper-container', {
			loop: true, //无缝轮播
			// 如果需要分页器
			pagination: '.swiper-pagination',
			// 如果需要前进后退按钮
			nextButton: '.swiper-button-next',
			prevButton: '.swiper-button-prev',
			mousewheelControl: true //开启鼠标滚轮控制
			// 如果需要滚动条
			// scrollbar: '.swiper-scrollbar',
			//如果需要自动切换海报
			// autoplay: {
			//   delay: 1000,//时间 毫秒
			//   disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true
			// },
		});
	}
};
</script>

<style scoped>
.swiper-container {
	height: 500px;
	width: 100%;
}
.swiper-wrapper .swiper-slide {
	width: 100%;
	height: 100%;
	background-color: #42b983;
	text-align: center;
	line-height: 500px;
}
</style>

效果：