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>
 
效果:

 
完整示例:(运行npm install安装包,npm run serve 启动项目)
 
点击下载:swiper案例.zip

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/1200.html