swipe圖片輪播不管是在pc端，還是移動端都是常見的效果，在這一章將用開源插件swiper完成一個比較簡單的swipe循環輪播組件.最近公司太忙，更新慢，請見諒~~
官網介紹：
Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。
Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。
Swiper開源、免費、穩定、使用簡單、功能強大，是架構移動終端網站的重要選擇！
swiper中文文檔：http://www.swiper.com.cn
我們在components文件夾里創建一個swipe組件，將需要用到的js以及css文件復制到assets/lib文件夾下，如圖：
Paste_Image.png
然后根據swiper的使用方法：http://www.swiper.com.cn/usage/index.html
將html結構復制到swipe組件里，引入css文件，以及js
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 分頁器 -->
<div class="swiper-pagination"></div>
</div>
</template>
<script>
import '../assets/lib/swiper/js/swiper.js'
export default {
mounted() {
var mySwiper = new Swiper ('.swiper-container', {
loop: true,
// 如果需要分頁器
pagination: '.swiper-pagination',
})
}
}
</script>
<style>
@import '../assets/lib/swiper/css/swiper.css';
.swiper-pagination-bullet-active {
background: #fff;
}
</style>
保存預覽會報錯，我們將swiper.js尾部需要修改一下
將AMD模式刪掉，改成
export default window.Swiper;
我們可能在一個頁面引用多個swipe組件，就會發生命名沖突，所以我們在實例化swiper的時候，類名需要變化一下，例如：
<m-swipe swipeid="swipe01"></m-swipe>
<m-swipe swipeid="swipe02"></m-swipe>
<div class="swiper-container" :class="swipeid">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 分頁器 -->
<div class=".swiper-pagination"></div>
</div>
export default {
props: {
swipeid: {
type: String,
default: 'swipe01'
}
},
mounted() {
var That = this;
new Swiper('.'+That.swipeid, {
loop: true,
// 如果需要分頁器
pagination: '.swiper-pagination',
})
}
簡單的swipe組件就完成了，我們再來豐富他的配置參數，改成可傳遞參數的組件。具體參數參考中文api文檔：http://www.swiper.com.cn/api/index.html
swipe.vue
<template>
<div class="swiper-container" :class="swipeid">
<div class="swiper-wrapper">
<slot name="swiper-con"></slot>
</div>
<!-- 分頁器 -->
<div :class="{'swiper-pagination':pagination}"></div>
</div>
</template>
<script>
import '../assets/lib/swiper/js/swiper.js'
export default {
props: {
swipeid: {
type: String,
default: ''
},
effect: {
type: String,
default: 'slide'
},
loop: {
type: Boolean,
default: true
},
direction: {
type: String,
default: 'horizontal'
},
pagination: {
type: Boolean,
default: true
},
autoplay: {
type: Number,
default: 5000,
},
paginationType: {
type: String,
default: 'bullets'
}
},
mounted() {
var That = this;
new Swiper('.'+That.swipeid, {
//循環
loop: That.loop,
//分頁器
pagination: '.swiper-pagination',
//分頁類型
paginationType: That.paginationType, //fraction,progress,bullets
//自動播放
autoplay: That.autoplay,
//方向
direction: That.direction,
//特效
effect: That.effect, //slide,fade,coverflow,cube
})
}
}
</script>
<style>
@import '../assets/lib/swiper/css/swiper.css';
.swiper-pagination-bullet-active {
background: #fff;
}
</style>
index.vue
<template>
<div>
<m-header title="豆瓣app" :bg="true" fixed>
<a href="javascript:;" slot="right">分享</a>
</m-header>
<div class="page-content">
<m-swipe swipeid="swipe01" :autoplay="1000" effect="cube">
<div class="swiper-slide slide02" slot="swiper-con">Slide 1</div>
<div class="swiper-slide slide01" slot="swiper-con">Slide 2</div>
<div class="swiper-slide slide03" slot="swiper-con">Slide 3</div>
</m-swipe>
<m-swipe swipeid="swipe021" :loop="false" paginationType="fraction" :autoplay="2000">
<div class="swiper-slide slide01" slot="swiper-con">Slide 1</div>
<div class="swiper-slide slide02" slot="swiper-con">Slide 2</div>
<div class="swiper-slide slide03" slot="swiper-con">Slide 3</div>
</m-swipe>
<p>asdasdas</p>
<p>asdasdas</p>
<p>asdasdas</p>
<p>asdasdas</p>
<p>asdasdas</p>
<p>asdasdas</p>
<p>asdasdas</p>
<p>asdasdas</p>
<p>asdasdas</p>
<p>asdasdas</p>
<p>asdasdas</p>
<p>asdasdas</p>
</div>
</div>
</template>
<script>
import mHeader from '../../components/header'
import mSwipe from '../../components/swipe'
export default {
name: 'index',
components: {
mHeader,
mSwipe
}
}
</script>
<style lang="less">
.is-fixed ~ .page-content{
padding-top:44px;
}
.slide01{
background: #41b883;
text-align: center;
line-height: 200px;
font-size: 30px;
color: #fff;
}
.slide02{
background: #364a60;
text-align: center;
line-height: 200px;
font-size: 30px;
color: #fff;
}
.slide03{
background: #ea6f5a;
text-align: center;
line-height: 200px;
font-size: 30px;
color: #fff;
}
</style>
錄像1_轉.gif
git地址：
https://github.com/MrMoveon/doubanApp
vue專題目錄：
1-vuejs2.0實戰：仿豆瓣app項目，創建自定義組件tabbar
