vue.js+vue-awesome-swiper輪播
阿新 • • 發佈:2019-01-28
一般做移動端輪播圖的時候,最常用的就是Swiper外掛了,而vue.js也有一個輪播元件vue-awesome-swiper,用法跟swiper相似。
1.安裝vie-awesome-swiper
nam install vue-awesome-swiper --save-dev
2.引用vie-awesome-swiper元件,這裡我是用vie-cli建立的專案,在main.js:
import VueAwesomeSwiper from 'vue-awesome-swiper';
Vue.use(VueAwesomeSwiper) //記得不要忘記這句
3.Home.vue下使用
<template>
<div>
<swiper :options="swiperOption" ref="mySwiperA">
<!-- 幻燈內容 -->
<swiper-slide>slide1</swiper-slide>
<swiper-slide>slide2</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>
<script>
export default {
data(){
return {
swiperOption: {
// 所有配置均為可選(同Swiper配置)
notNextTick: true,
autoplay: 3000,
grabCursor : true,
setWrapperSize :true,
autoHeight: true,
pagination : '.swiper-pagination',
paginationClickable :true,
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next',
scrollbar:'.swiper-scrollbar',
mousewheelControl : true,
observeParents:true,
onTransitionStart(swiper){
console.log(swiper)
}
}
}
},
computed: {
swiper() {
return this.$refs.mySwiperA.swiper
}
},
mounted() {
console.log("每次切換都會觸發我");
this.swiper.slideTo(3, 1000, false)
}
}
</script>