Vue腳手架引入Swiper最新實(shí)操步驟:
//npm
npm install vue-awesome-swiper --save
//可以全局 or 局部引用
全局:
//main.js
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import './swiper4/swiper.css' //這個(gè)css要去官網(wǎng)下載然后放進(jìn)項(xiàng)目引入
Vue.use(VueAwesomeSwiper)
局部:
// *.vue
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import './swiper4/swiper.css'
// <script>
components: {
swiper,
swiperSlide
}
使用
<template>
<div id="app">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide><div class="jia">jia1</div></swiper-slide>
<swiper-slide><div class="jia">jia1</div></swiper-slide>
<swiper-slide><div class="jia">jia1</div></swiper-slide>
<swiper-slide><div class="jia">jia1</div></swiper-slide>
<swiper-slide><div class="jia">jia1</div></swiper-slide>
<swiper-slide><div class="jia">jia1</div></swiper-slide>
<swiper-slide><div class="jia">jia1</div></swiper-slide>
<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>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</div>
</template>
js and css
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import './swiper4/swiper.css'
export default {
name: 'carrousel',
data() {
return {
swiperOption: {
notNextTick: true, // notNextTick是一個(gè)組件自有屬性，如果notNextTick設(shè)置為true蹂楣，組件則不會(huì)通過NextTick來實(shí)例化swiper鸭你，也就意味著你可以在第一時(shí)間獲取到swiper對象魂角，假如你需要?jiǎng)偧虞d遍使用獲取swiper對象來做什么事赡茸，那么這個(gè)屬性一定要是true
autoplay: true,
autoplay: {
disableOnInteraction: false, //用戶左劃右劃后恢復(fù)自動(dòng)輪播
delay: 1000
},
loop: true,
direction: 'horizontal',
grabCursor: true,
setWrapperSize: true,
autoHeight: true,
pagination: {
el: '.swiper-pagination'
},
centeredSlides: true,
paginationClickable: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
keyboard: true,
mousewheelControl: true,
observeParents: true, // 如果自行設(shè)計(jì)了插件审葬，那么插件的一些配置相關(guān)參數(shù)，也應(yīng)該出現(xiàn)在這個(gè)對象中拔鹰，如下debugger
debugger: true
}
}
},computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
mounted() {
// current swiper instance
// 然后你就可以使用當(dāng)前上下文內(nèi)的swiper對象去做你想做的事了
// this.swiper.slideTo(3, 1000, false)
},
components: {
swiper, swiperSlide
}
}
</script>
<style>
.jia {
height: 300px;
line-height: 300px;
font-size: 30px;
color: #fff;
background: red;
text-align: center;
}
</style>
提示
新版的VueAwesomeSwiper是從Swiper4改寫的,
api寫法有變化,老版本的寫法會(huì)引起組件失效
比如autoplay,pagination,prevButton,nextButton等屬性
在新版的api文檔中新增了組件選項(xiàng),使用新寫法就可以正常使用了
查看新版api文檔
點(diǎn)個(gè)贊就成功啦哈!
