VUE项目中轮播图的实现 vue-awesome-swiper
——依赖插件vue-awesome-swiper，PC端应用
一款基于 Swiper4、适用于 Vue 的轮播组件，支持服务端渲染和单页应用。官方GitHub参考链接
功能实现：
- 自动轮播
- 无限循环
- 鼠标进入停止轮播
- 鼠标移出开始轮播
注：初学vue，小白鼠一枚，有错误请指点，勿喷 勿喷， 手动比心 ❤
安装
方法一：CDN 安装
<link rel="stylesheet" href="path/to/swiper/dist/css/swiper.css"/>
<script type="text/javascript" src="path/to/swiper.js"></script>
<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/vue-awesome-swiper.js"></script>
<script type="text/javascript">
Vue.use(window.VueAwesomeSwiper)
</script>
方法二： npm安装 *
使用 vue-cli 时推荐
npm install vue-awesome-swiper --save
注：其他方法请 参考官网
main.js文件中
引入文件，全局配置
方法一：局部引入：
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
}
}
方法二：全局引入：
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)
轮播组件中 "carousel.vue"
使用方法：
视图
<template>
<swiper class="swiper" :options="swiperOption" ref="mySwiper">
<!-- slides -->
<swiper-slide style="background: #007aff"> I'm slide 1</swiper-slide>
<swiper-slide style="background: yellow"> I'm slide 2</swiper-slide>
<swiper-slide style="background: red"> I'm slide 3</swiper-slide>
<swiper-slide style="background: green"> I'm slide 4</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</template>
script
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
data(){
return {
//设置属性
swiperOption:{
//显示分页
pagination: {
el: '.swiper-pagination',
clickable:true
},
//切换模式 横屏或者竖屏
// direction : 'vertical',
//设置自动播放速度
autoplay: {
disableOnInteraction: false,
delay:4000
},
//开启无限循环
loop:true,
//设置点击箭头
paginationClickable :true,
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next',
//设置同屏显示的数量，默认为1，使用auto是随意的意思。
slidesPerView:1,
//开启鼠标滚轮控制Swiper切换。可设置鼠标选项，或true使用默认值。
mousewheel:true ,
//默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动可能不止一格且不会贴合。
// freeMode:true
}
}
},
components:{
swiper,
swiperSlide
}
}
</script>
carousel.vue 实例代码
<template>
<swiper class="swiper" :options="swiperOption" ref="mySwiper">
<!-- slides -->
<swiper-slide style="background: #007aff"> I'm slide 1</swiper-slide>
<swiper-slide style="background: yellow"> I'm slide 2</swiper-slide>
<swiper-slide style="background: red"> I'm slide 3</swiper-slide>
<swiper-slide style="background: green"> I'm slide 4</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</template>
<script>
import {swiper, swiperSlide} from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
name: 'carrousel',
data() {
return {
swiperOption: {
// spaceBetween: 30, //板块间距
loop: true, //无缝轮播
centeredSlides: true,
autoplay: { //自动轮播
delay: 3000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
}
}
},
components: {
swiper,
swiperSlide
},
// 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
mounted() {
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
console.log('this is current swiper instance object', this.swiper);
// this.swiper.slideTo(3, 1000, false)
console.log('mounted');
//鼠标覆盖停止自动切换
this.swiper.el.onmouseover = function () {
this.swiper.autoplay.stop();
console.log('stop');
}
//鼠标离开开始自动切换
this.swiper.el.onmouseout = function () {
this.swiper.autoplay.start();
console.log('start');
}
}
}
</script>
<style scoped>
.swiper {
width: 100%;
height: 600px;
}
swiper-slide {
width: 100%;
height: 600px;
}
</style>
参考网页
更多配置选项请参考 swiper官网
更多vue-awesome-swiper 使用技巧请参考vue-awesome-swiper——Github
