快速上手Swiper插件
- 先下載插件
npm install vue-awesome-swiper --save
- 引入插件
- 全局引用 所有的組件都能使用
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)
- 單個組件中使用
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
}
}
- 輪播圖一般只一次，我個人還是覺得只是使用一次，就直接用在組件中引用蹲坷，減少main.js文件中的代碼量
- 在template中使用
- HTML代碼
<template>
<div>
<swiper :options="swiperOption" ref="mySwiper">
<!-- slides -->
<swiper-slide>
<img src="http://p1.music.126.net/UZ4yDRZThaXTeo8QjRLg9Q==/109951164780032284.jpg?imageView&quality=89"/>
</swiper-slide>
<swiper-slide>
<img src="http://p1.music.126.net/PaTN2pnO-ALBOisFFGSIsw==/109951164780978350.jpg?imageView&quality=89"/>
</swiper-slide>
<swiper-slide>
<img src="http://p1.music.126.net/j8NQLZ2P4Zn1tr30c7dSTw==/109951164780079361.jpg?imageView&quality=89"/>
</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>
</div>
</template>
- js代碼 放在data里
data() {
return {
swiperOption: {
//循環(huán)模式開啟
loop: true,
//自動切換
autoplay: {
//每隔2000毫秒切換一次
delay: 2000,
//如果設(shè)置為false刹缝，用戶操作swiper之后自動切換不會停止屋吨，每次都會重新啟動autoplay
//如果設(shè)置為true 如拖動横殴、點擊、觸碰后贡翘，自動切換將會停止
disableOnInteraction: false
},
navigation: {
//使用前進后退按鈕來控制Swiper切換
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
pagination: {
el: ".swiper-pagination",
clickable: true
}
}
};
}
