近幾日一直在看怎樣制作微信小程序的swiper輪播圖。因為我既需要生成小程序的代碼，也需要生成H5版代碼，如果編寫兩套效率會比較低下，所以選擇了uni-app。
uni-app已經(jīng)在基礎(chǔ)組件swiper中已經(jīng)直接支持了輪播動畫。
我主要需要解決的是以下幾個問題：
① 在swiper中怎樣添加css3流行的animate.css動畫。
② 添加好后如果滑動了輪播圖，怎樣能保證下一屏的動畫不自動播放。
③ 怎樣能實現(xiàn)輪播圖的無限循環(huán)播放。
④ 怎樣能實現(xiàn)，當(dāng)用戶點擊一個按鈕之后，可以跳轉(zhuǎn)到指定的swiper-item中。也就是跳轉(zhuǎn)到指定的屏。
⑤ 小程序和H5版的代碼會生成一個頭部，在H5版中需要隱藏掉導(dǎo)航欄。
以下就是我整個制作的思路過程，僅供參考。另外，代碼是uni-app開發(fā)，所以在小程序中和H5中測試都沒有問題。另外為了方便小程序開發(fā)同學(xué)了解，會提供小程序版代碼和uni-app代碼供參考。
代碼實現(xiàn)
在H5開發(fā)中經(jīng)常使用的就是animate.css。在微信中自然是支持的，因為微信會對上傳的小程序有大小限制，所以這里我使用了一個極簡化的animate.css，其中刪掉了很多-webkit-animation開頭的css3。因為我們只需要在小程序和H5中運行，這樣做影響也不大。如果需要的話，可以從下面的代碼中獲取。
我們先來看下代碼：
<template>
<view>
<button type="primary" @tap="goChange">跳轉(zhuǎn)到第二屏</button>
<swiper :vertical="true" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000" @change="changeSwiper" @animationfinish="changeFinish" :current-item-id="item_id" circular="true">
<swiper-item item-id="slide0">
<view>
<image src="../../static/uni.png" :class="animate_0"></image>
</view>
</swiper-item>
<swiper-item item-id="slide1">
<view>
<image src="../../static/uni.png" :class="animate_1"></image>
</view>
</swiper-item>
<swiper-item item-id="slide2">
<view>
<image src="../../static/uni.png" :class="animate_2"></image>
</view>
</swiper-item>
<swiper-item item-id="slide3">
<view>
<image src="../../static/uni.png" :class="animate_3"></image>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
item_id: 'slide2',
animate_0: 'animated swing',
animate_1: '',
animate_2: '',
animate_3: ''
}
},
onLoad() {
},
methods: {
changeSwiper(event){ // 清空除了當(dāng)前swiper以外的所有動畫
let current = event.detail.current; // 當(dāng)前頁下標(biāo)
this.item_id = 'slide'+current; // 這里必須記錄，否則只能跳轉(zhuǎn)一次
switch (current){
case 0:
this['animate_1'] = this['animate_2'] = this['animate_3'] = '';
break;
case 1:
this['animate_0'] = this['animate_2'] = this['animate_3'] = '';
break;
case 2:
this['animate_0'] = this['animate_1'] = this['animate_3'] = '';
break;
case 3:
this['animate_0'] = this['animate_1'] = this['animate_2'] = '';
break;
}
},
changeFinish(event){ // swiper動畫完成之后，給當(dāng)前swiper添加動畫效果
let current = event.detail.current;
switch(current){
case 0:
this['animate_0'] = 'animated swing';
break;
case 1:
this['animate_1'] = 'animated shake';
break;
case 2:
this['animate_2'] = 'animated tada';
break;
case 3:
this['animate_3'] = 'animated heartBeat';
break;
}
},
goChange(){
this.item_id = 'slide1';
}
}
}
</script>
<style>
@import '../../common/animate.css';
.content {
text-align: center;
.content-swiper{
height: 100vh;
image{
height: 200upx;
width: 200upx;
margin-top: 200upx;
}
}
}
</style>首先uni-app支持sass。在css中直接引入了簡潔版animate.css。問題①
之后通過查看文檔，發(fā)現(xiàn)circular這個參數(shù)可以實現(xiàn)類似H5頁面使用swiper.jsloop參數(shù)的功能。這里我掉到了uni-app和微信小程序文檔描述的坑中。因為一直在找loop（循環(huán)）這個參數(shù)，我甚至都以為實現(xiàn)不了這個無限循環(huán)的功能了呢。原來小程序中這個參數(shù)叫做circular（圓形）。o(╯□╰)o 問題③
因為我這里要實現(xiàn)一個豎屏的滑動效果，所以將參數(shù)vertical設(shè)置為true。
在uni-app中，通過change事件，可以監(jiān)聽每一個輪播屏的改變。在這個事件中，我記錄的當(dāng)前屏的下標(biāo)current。然后將非當(dāng)前屏的全部css3動畫取消掉。最后在animationfinish事件中，當(dāng)swiper滑動動畫結(jié)束后，給當(dāng)前屏的元素添加css3動畫。問題②
在uni-app中有個current-item-id參數(shù)，代表當(dāng)前所在滑塊的 item-id。這個文檔我看了好久，才明白。原來是需要在swiper-item中指定上item-id。然后當(dāng)用戶點擊事件觸發(fā)時，修改綁定到current-item-id上的值即可。我的代碼初始化時指定到了item-id為slide2這一屏上。問題④
最后一個問題時uni-app中隱藏掉H5導(dǎo)航欄。只需要在pages.json中設(shè)置titleNView為false即可。
微信小程序代碼
<!--index.wxml-->
<view class="container">
<button bindtap='goChange'>跳轉(zhuǎn)到</button>
<swiper vertical="true" circular="true" current="{{currentId}}" indicator-dots="true" bindchange="changeSwiper" bindanimationfinish="changeFinish">
<swiper-item>
<image src='../../static/uni.png' class='animated {{animate_0}}'></image>
</swiper-item>
<swiper-item>
<image src='../../static/uni.png' class='animated {{animate_1}}'></image>
</swiper-item>
<swiper-item>
<image src='../../static/uni.png' class='animated {{animate_2}}'></image>
</swiper-item>
</swiper>
</view>
//index.js
const app = getApp()
Page({
data: {
currentId: 0,
animate_0: 'swing',
animate_1: '',
animate_2: ''
},
onLoad: function() {
},
goChange: function() {
this.setData({
currentId: 2
});
},
changeSwiper: function(event) {
let current = event.detail.current;
switch (current) {
case 0:
this.setData({
animate_1: '',
animate_2: ''
});
break;
case 1:
this.setData({
animate_0: '',
animate_2: ''
});
break;
case 2:
this.setData({
animate_0: '',
animate_1: ''
});
break;
}
},
changeFinish: function(event) {
let current = event.detail.current;
switch (current) {
case 0:
this.setData({
animate_0: 'swing',
});
break;
case 1:
this.setData({
animate_1: 'shake',
});
break;
case 2:
this.setData({
animate_2: 'tada',
});
break;
}
}
})需要注意的是，要部署到web服務(wù)器使用，不支持本地file協(xié)議打開。
其中生成了兩個版本的代碼，方便大家參考。
