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

西平網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、響應式網(wǎng)站設計等網(wǎng)站項目制作，到程序開發(fā)，運營維護。成都創(chuàng)新互聯(lián)公司2013年成立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選成都創(chuàng)新互聯(lián)。

需要解決的問題

近幾日一直在看怎樣制作微信小程序的swiper輪播圖。因為我既需要生成小程序的代碼，也需要生成H5版代碼，如果編寫兩套效率會比較低下，所以選擇了uni-app。

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

我主要需要解決的是以下幾個問題：

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

以下就是我整個制作的思路過程，僅供參考。另外，代碼是uni-app開發(fā)，所以在小程序中和H5中測試都沒有問題。另外為了方便小程序開發(fā)同學了解，會提供小程序版代碼和uni-app代碼供參考。

代碼實現(xiàn)

在H5開發(fā)中經(jīng)常使用的就是animate.css。在微信中自然是支持的，因為微信會對上傳的小程序有大小限制，所以這里我使用了一個極簡化的animate.css，其中刪掉了很多-webkit-animation開頭的css3。因為我們只需要在小程序和H5中運行，這樣做影響也不大。如果需要的話，可以從下面的代碼中獲取。

我們先來看下代碼：

• 首先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設置為true。
• 在uni-app中，通過change事件，可以監(jiān)聽每一個輪播屏的改變。在這個事件中，我記錄的當前屏的下標current。然后將非當前屏的全部css3動畫取消掉。最后在animationfinish事件中，當swiper滑動動畫結束后，給當前屏的元素添加css3動畫。問題②
• 在uni-app中有個current-item-id參數(shù)，代表當前所在滑塊的 item-id。這個文檔我看了好久，才明白。原來是需要在swiper-item中指定上item-id。然后當用戶點擊事件觸發(fā)時，修改綁定到current-item-id上的值即可。我的代碼初始化時指定到了item-id為slide2這一屏上。問題④
• 最后一個問題時uni-app中隱藏掉H5導航欄。只需要在pages.json中設置titleNView為false即可。

微信小程序代碼

      跳轉到                                                                                                         //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;         }     } })

我將代碼托管到了騰訊云開發(fā)者平臺，需要的話可以參考。在代碼目錄unpackage/dist/build/h6中，就是生成好的H5版頁面。需要注意的是，要部署到web服務器使用，不支持本地file協(xié)議打開。
其中生成了兩個版本的代碼，方便大家參考。

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