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

相信很多朋友都和我一样在Vue中使用swiper遇到过很多问题,首先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>

效果:

attachments-2021-06-WUHxkIE260c02728c2f47.png

完整示例:(运行npm install安装包,npm run serve 启动项目)

点击下载:swiper案例.zip

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

608 篇文章

作家榜 »

  1. admin 608 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. 魏晓亮 0 文章