快速入門在Vue中使用滑動外掛Swiper
阿新 • • 發佈:2018-11-30
前言
swiper
開源、免費、強大的滑動外掛。
swiper中文網
Swiper4中文API
https://www.swiper.com.cn/api/index.html
Vue-Awesome-Swipwe
基於Swiper、適用於Vue的輪播元件,支援服務端和單頁引用。
外掛npm
https://www.npmjs.com/package/vue-awesome-swiper
線上demo
https://surmon-china.github.io/vue-awesome-swiper/
效果
場景
home.vue是仿音樂播放器的主頁面,在home介面引入了Swiper_Banner.vue這個元件用來實現輪播圖。
在Swiper_Banner.vue,滾動的圖片已經寫死,放在assets下的img目錄下。
專案目錄結構
實現
1.安裝vue-awesome-swiper外掛
專案根目錄下開啟命令列輸入:
npm install --save vue-awesome-swiper
或者
cnpm install --save vue-awesome-swiper
2.home.vue中引入Swiper_Banner.vue元件
開啟home.vue
引入元件
import SwiperBanner from "../components/Swiper_Banner"
其中../表示上級目錄。
注入元件
export default {
name:"home",
components:{
SwiperBanner
}
}
引用元件
<template lang="html"> <div class=""> <TodayRecommend/> <NewsMusic /> <SwiperBanner/> </div> </template>
home.vue 完整程式碼
<template lang="html">
<div class="">
<TodayRecommend/>
<NewsMusic />
<SwiperBanner/>
</div>
</template>
<script>
import TodayRecommend from "../components/Today_Recommend"
import NewsMusic from "../components/News_Music"
import SwiperBanner from "../components/Swiper_Banner"
export default {
name:"home",
components:{
TodayRecommend,
NewsMusic,
SwiperBanner
}
}
</script>
<style lang="css">
</style>
3.在Swiper_Banner.vue中配置輪播圖
開啟輪播圖元件Swiper_Banner.vue
首先引入swiper以及swiper的樣式檔案
(區域性註冊:參照:https://www.npmjs.com/package/vue-awesome-swiper)
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
進行元件引入宣告
components: {
swiper,
swiperSlide
}
頁面新增swiper元件元素
參照:
https://www.npmjs.com/package/vue-awesome-swiper
下的SPA:
<!-- The ref attr used to find the swiper instance -->
<template>
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<swiper-slide>I'm Slide 4</swiper-slide>
<swiper-slide>I'm Slide 5</swiper-slide>
<swiper-slide>I'm Slide 6</swiper-slide>
<swiper-slide>I'm Slide 7</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>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</template>
<script>
export default {
name: 'carrousel',
data() {
return {
swiperOption: {
// some swiper options/callbacks
// 所有的引數同 swiper 官方 api 引數
// ...
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
mounted() {
// current swiper instance
// 然後你就可以使用當前上下文內的swiper物件去做你想做的事了
console.log('this is current swiper instance object', this.swiper)
this.swiper.slideTo(3, 1000, false)
}
}
</script>
這裡只要分頁器,別的屬性不配置,
配置引數參照官方API引數:
https://www.swiper.com.cn/api/pagination/362.html
此處為:
<template lang="html">
<div class="banner">
<swiper :options="swiperOption">
<swiper-slide>
<img src="../assets/img/b1.jpg" alt="">
</swiper-slide>
<swiper-slide>
<img src="../assets/img/b2.jpg" alt="">
</swiper-slide>
<swiper-slide>
<img src="../assets/img/b3.jpg" alt="">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
配置swiper元件屬性
export default {
data(){
return{
swiperOption:{
pagination: {
el: '.swiper-pagination',//swiper的分頁器
},
autoplay:{
delay:1000,//間隔一秒滾動一次
}//自動滾動
}
}
},
Swiper_Banner.vue完整程式碼
<template lang="html">
<div class="banner">
<swiper :options="swiperOption">
<swiper-slide>
<img src="../assets/img/b1.jpg" alt="">
</swiper-slide>
<swiper-slide>
<img src="../assets/img/b2.jpg" alt="">
</swiper-slide>
<swiper-slide>
<img src="../assets/img/b3.jpg" alt="">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
data(){
return{
swiperOption:{
pagination: {
el: '.swiper-pagination',//swiper的分頁器
},
autoplay:{
delay:1000,//間隔一秒滾動一次
}//自動滾動
}
}
},
components: {
swiper,
swiperSlide
}
}
</script>
<style scoped>
.banner{
padding: 10px;
}
</style>