這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)swiper實(shí)現(xiàn)輪播效果，以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

員工經(jīng)過長期磨合與沉淀，具備了協(xié)作精神，得以通過團(tuán)隊(duì)的力量開發(fā)出優(yōu)質(zhì)的產(chǎn)品。創(chuàng)新互聯(lián)堅(jiān)持“專注、創(chuàng)新、易用”的產(chǎn)品理念，因?yàn)椤皩Ｗ⑺詫I(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡單”。公司專注于為企業(yè)提供網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、微信公眾號開發(fā)、電商網(wǎng)站開發(fā)，成都微信小程序，軟件定制設(shè)計(jì)等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。需要解決的問題

uni-app已經(jīng)在基礎(chǔ)組件swiper中已經(jīng)直接支持了輪播動畫。

• ①在swiper中怎樣添加css3流行的animate.css動畫。
• ②添加好后如果滑動了輪播圖，怎樣能保證下一屏的動畫不自動播放。
• ③怎樣能實(shí)現(xiàn)輪播圖的無限循環(huán)播放。
• ④怎樣能實(shí)現(xiàn)，當(dāng)用戶點(diǎn)擊一個(gè)按鈕之后，可以跳轉(zhuǎn)到指定的swiper-item中。也就是跳轉(zhuǎn)到指定的屏。
• ⑤小程序和H5版的代碼會生成一個(gè)頭部，在H5版中需要隱藏掉導(dǎo)航欄。

uni-app開發(fā)，所以在小程序中和H5中測試都沒有問題。另外為了方便小程序開發(fā)同學(xué)了解，會提供小程序版代碼和uni-app代碼供參考。

代碼實(shí)現(xiàn)

animate.css，其中刪掉了很多-webkit-animation開頭的css3。因?yàn)槲覀冎恍枰谛〕绦蚝虷5中運(yùn)行，這樣做影響也不大。如果需要的話，可以從下面的代碼中獲取。

<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這個(gè)參數(shù)可以實(shí)現(xiàn)類似H5頁面使用swiper.jsloop參數(shù)的功能。這里我掉到了uni-app和微信小程序文檔描述的坑中。因?yàn)橐恢痹谡?code >loop（循環(huán)）這個(gè)參數(shù)，我甚至都以為實(shí)現(xiàn)不了這個(gè)無限循環(huán)的功能了呢。原來小程序中這個(gè)參數(shù)叫做circular（圓形）。o(╯□╰)o 問題③
• 因?yàn)槲疫@里要實(shí)現(xiàn)一個(gè)豎屏的滑動效果，所以將參數(shù)vertical設(shè)置為true。
• 在uni-app中，通過change事件，可以監(jiān)聽每一個(gè)輪播屏的改變。在這個(gè)事件中，我記錄的當(dāng)前屏的下標(biāo)current。然后將非當(dāng)前屏的全部css3動畫取消掉。最后在animationfinish事件中，當(dāng)swiper滑動動畫結(jié)束后，給當(dāng)前屏的元素添加css3動畫。問題②
• 在uni-app中有個(gè)current-item-id參數(shù)，代表當(dāng)前所在滑塊的 item-id。這個(gè)文檔我看了好久，才明白。原來是需要在swiper-item中指定上item-id。然后當(dāng)用戶點(diǎn)擊事件觸發(fā)時(shí)，修改綁定到current-item-id上的值即可。我的代碼初始化時(shí)指定到了item-id為slide2這一屏上。問題④
• 最后一個(gè)問題時(shí)uni-app中隱藏掉H5導(dǎo)航欄。只需要在pages.json中設(shè)置titleNView為false即可。

微信小程序代碼

<!--index.wxml--> <view>     <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;         }     } })

unpackage/dist/build/h6中，就是生成好的H5版頁面。需要注意的是，要部署到web服務(wù)器使用，不支持本地file協(xié)議打開。
其中生成了兩個(gè)版本的代碼，方便大家參考。

上述就是小編為大家分享的swiper實(shí)現(xiàn)輪播效果了，如果您也有類似的疑惑，不妨參照上述方法進(jìn)行嘗試。如果想了解更多相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊。

文章題目：swiper實(shí)現(xiàn)輪播效果-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://www.chinadenli.net/article8/ipdip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、營銷型網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、網(wǎng)站制作、微信公眾號、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)