本人微信公眾號:前端修練之路,歡迎關注。
最近幾日一直在看怎麼製作微信小程式的swiper輪播圖。因為我既需要產生小程式的程式碼,也需要產生H5版程式碼,如果寫兩套效率會比較低下,所以選擇了uni-app。
uni-app
已經在基礎元件swiper中已經直接支援了輪播動畫。
我主要需要解決的是以下幾個問題:
<span style="font-size: 14px;">animate.css </span>
動畫。
<span style="font-size: 14px;">swiper-item</span>
中。也就是跳到指定的螢幕。
以下就是我整個製作的思維過程,僅供參考。另外,程式碼是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中文網其他相關文章!