本人微信公眾號：前端修練之路，歡迎關注。
需要解決的問題
最近幾日一直在看怎麼製作微信小程式的swiper輪播圖。因為我既需要產生小程式的程式碼，也需要產生H5版程式碼，如果寫兩套效率會比較低下，所以選擇了uni-app。
uni-app已經在基礎元件swiper中已經直接支援了輪播動畫。
我主要需要解決的是以下幾個問題：
-
①在swiper中怎樣加入css3流行的
<span style="font-size: 14px;">animate.css </span>動畫。
- ②添加好後如果滑動了輪播圖，怎麼能保證下一螢幕的動畫不會自動播放。
- ③怎麼能實現輪播圖的無限循環播放。
-
④怎麼能實現，當使用者點擊一個按鈕之後，可以跳到指定的
<span style="font-size: 14px;">swiper-item</span>中。也就是跳到指定的螢幕。
- ⑤小程式和H5版的程式碼會產生一個頭部，在H5版中需要隱藏掉導覽列。
以下就是我整個製作的思維過程，僅供參考。另外，程式碼是uni-app開發，所以在小程式中和H5中測試都沒有問題。另外為了方便小程式開發同學了解，會提供小程式版程式碼和uni-app程式碼供參考。
程式碼實作
在H5開發中常用的就是animate.css。在微信中自然是支援的，因為微信會對上傳的小程式有大小限制，所以這裡我使用了一個極簡化的animate.css，其中刪掉了很多-webkit- animation開頭的css3。因為我們只需要在小程式和H5中運行，這樣做影響也不大。如果需要的話，可以從下面的程式碼中取得。
我們先來看下程式碼：
<template>
<view class="content">
<button type="primary" @tap="goChange">跳转到第二屏</button>
<swiper class="content-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 class="swiper-item">
<image src="../../static/uni.png" :class="animate_0"></image>
</view>
</swiper-item>
<swiper-item item-id="slide1">
<view class="swiper-item">
<image src="../../static/uni.png" :class="animate_1"></image>
</view>
</swiper-item>
<swiper-item item-id="slide2">
<view class="swiper-item">
<image src="../../static/uni.png" :class="animate_2"></image>
</view>
</swiper-item>
<swiper-item item-id="slide3">
<view class="swiper-item">
<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){ // 清空除了当前swiper以外的所有动画
let current = event.detail.current; // 当前页下标
this.item_id = 'slide'+current; // 这里必须记录，否则只能跳转一次
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动画完成之后，给当前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 lang="scss">
@import '../../common/animate.css';
.content {
text-align: center;
.content-swiper{
height: 100vh;
image{
height: 200upx;
width: 200upx;
margin-top: 200upx;
}
}
}
</style>登入後複製
-
首先
<span style="font-size: 14px;">uni-app</span>支持sass。在css中直接引入了简洁版<span style="font-size: 14px;">animate.css</span>。问题①
-
之后通过查看文档，发现
<span style="font-size: 14px;">circular</span>这个参数可以实现类似H5页面使用swiper.js<span style="font-size: 14px;">loop</span>参数的功能。这里我掉到了<span style="font-size: 14px;">uni-app</span>和<span style="font-size: 14px;">微信小程序</span>文档描述的坑中。因为一直在找<span style="font-size: 14px;">loop</span>（循环）这个参数，我甚至都以为实现不了这个无限循环的功能了呢。原来<span style="font-size: 14px;">小程序</span>中这个参数叫做<span style="font-size: 14px;">circular</span>（圆形）。o(╯□╰)o 问题③
-
因为我这里要实现一个竖屏的滑动效果，所以将参数
<span style="font-size: 14px;">vertical</span>设置为<span style="font-size: 14px;">true</span>。
-
在
<span style="font-size: 14px;">uni-app</span>中，通过<span style="font-size: 14px;">change</span>事件，可以监听每一个轮播屏的改变。在这个事件中，我记录的当前屏的下标<span style="font-size: 14px;">current</span>。然后将非当前屏的全部css3动画取消掉。最后在<span style="font-size: 14px;">animationfinish</span>事件中，当<span style="font-size: 14px;">swiper</span>滑动动画结束后，给当前屏的元素添加css3动画。问题②
-
在
<span style="font-size: 14px;">uni-app</span>中有个<span style="font-size: 14px;">current-item-id</span>参数，代表当前所在滑块的 <span style="font-size: 14px;">item-id</span>。这个文档我看了好久，才明白。原来是需要在<span style="font-size: 14px;">swiper-item</span>中指定上<span style="font-size: 14px;">item-id</span>。然后当用户点击事件触发时，修改绑定到<span style="font-size: 14px;">current-item-id</span>上的值即可。我的代码初始化时指定到了<span style="font-size: 14px;">item-id</span>为<span style="font-size: 14px;">slide2</span>这一屏上。问题④
-
最后一个问题时
<span style="font-size: 14px;">uni-app</span>中隐藏掉H5导航栏。只需要在<span style="font-size: 14px;">pages.json</span>中设置<span style="font-size: 14px;">titleNView</span>为<span style="font-size: 14px;">false</span>即可。
微信小程序代码
<!--index.wxml-->
<view class="container">
<button bindtap='goChange'>跳转到</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;
}
}
})登入後複製
我将代码托管到了腾讯云开发者平台，需要的话可以参考。在代码目录unpackage/dist/build/h5中，就是生成好的H5版页面。需要注意的是，要部署到web服务器使用，不支持本地file协议打开。
其中生成了两个版本的代码，方便大家参考。
推荐教程：《微信小程序》
以上是小程式swiper輪播CSS3動畫及跳到指定swiper-item的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
