web前端|js教程
html5,微信小程序,uni-app web前端-js教程
easyui 管理系統 源碼,ubuntu修改更新源,tomcat7打印項目日志,爬蟲犯法怎么處理,php核心技術與最佳實踐交流,刷SEO指數lzw需要解決的問題近幾日一直在看怎樣制作微信小程序的swiper輪播圖。愛掏網 - it200.com因為我既需要生成小程序的代碼，也需要生成H5版代碼，如果編寫兩套效率會比較低下，所以選擇了uni-app。愛掏網 - it200.com
易語言下載進度條源碼,vscode導航欄不見了,ubuntu清空回收,tomcat 看日志命令,爬蟲 英文 cl,php mysql 備注,濮陽seo優化排名怎么做,網站根目錄路徑lzwuni-app已經在基礎組件swiper中已經直接支持了輪播動畫。愛掏網 - it200.com然之協同源碼分析,ubuntu命令升級系統,修改tomcat的默認項目,紙爬爬蟲,中山php培訓哪里有,seo推廣和競價推廣seo教程lzw我主要需要解決的是以下幾個問題：①在swiper中怎樣添加css3流行的animate.css動畫。愛掏網 - it200.com②添加好后如果滑動了輪播圖，怎樣能保證下一屏的動畫不自動播放。愛掏網 - it200.com③怎樣能實現輪播圖的無限循環播放。愛掏網 - it200.com④怎樣能實現，當用戶點擊一個按鈕之后，可以跳轉到指定的swiper-item中。愛掏網 - it200.com也就是跳轉到指定的屏。愛掏網 - it200.com⑤小程序和H5版的代碼會生成一個頭部，在H5版中需要隱藏掉導航欄。愛掏網 - it200.com
以下就是我整個制作的思路過程，僅供參考。愛掏網 - it200.com另外，代碼是uni-app開發，所以在小程序中和H5中測試都沒有問題。愛掏網 - it200.com另外為了方便小程序開發同學了解，會提供小程序版代碼和uni-app代碼供參考。愛掏網 - it200.com
在H5開發中經常使用的就是animate.css。愛掏網 - it200.com在微信中自然是支持的，因為微信會對上傳的小程序有大小限制，所以這里我使用了一個極簡化的animate.css，其中刪掉了很多-webkit-animation開頭的css3。愛掏網 - it200.com因為我們只需要在小程序和H5中運行，這樣做影響也不大。愛掏網 - it200.com如果需要的話，可以從下面的代碼中獲取。愛掏網 - it200.com
我們先來看下代碼：
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'; } } } @import '../../common/animate.css'; .content { text-align: center; .content-swiper{ height: 100vh; image{height: 200upx;width: 200upx;margin-top: 200upx; } } }
首先uni-app支持sass。愛掏網 - it200.com在css中直接引入了簡潔版animate.css。愛掏網 - it200.com問題①之后通過查看文檔，發現circular這個參數可以實現類似H5頁面使用swiper.jsloop參數的功能。愛掏網 - it200.com這里我掉到了uni-app和微信小程序文檔描述的坑中。愛掏網 - it200.com因為一直在找loop（循環）這個參數，我甚至都以為實現不了這個無限循環的功能了呢。愛掏網 - it200.com原來小程序中這個參數叫做circular（圓形）。愛掏網 - it200.como(╯□╰)o 問題③因為我這里要實現一個豎屏的滑動效果，所以將參數vertical設置為true。愛掏網 - it200.com在uni-app中，通過change事件，可以監聽每一個輪播屏的改變。愛掏網 - it200.com在這個事件中，我記錄的當前屏的下標current。愛掏網 - it200.com然后將非當前屏的全部css3動畫取消掉。愛掏網 - it200.com最后在animationfinish事件中，當swiper滑動動畫結束后，給當前屏的元素添加css3動畫。愛掏網 - it200.com問題②在uni-app中有個current-item-id參數，代表當前所在滑塊的 item-id。愛掏網 - it200.com這個文檔我看了好久，才明白。愛掏網 - it200.com原來是需要在swiper-item中指定上item-id。愛掏網 - it200.com然后當用戶點擊事件觸發時，修改綁定到current-item-id上的值即可。愛掏網 - it200.com我的代碼初始化時指定到了item-id為slide2這一屏上。愛掏網 - it200.com問題④最后一個問題時uni-app中隱藏掉H5導航欄。愛掏網 - it200.com只需要在pages.json中設置titleNView為false即可。愛掏網 - it200.com
//index.jsconst 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; } }})
我將代碼托管到了騰訊云開發者平臺，需要的話可以參考。愛掏網 - it200.com在代碼目錄unpackage/dist/build/h5中，就是生成好的H5版頁面。愛掏網 - it200.com需要注意的是，要部署到web服務器使用，不支持本地file協議打開。愛掏網 - it200.com
其中生成了兩個版本的代碼，方便大家參考。愛掏網 - it200.com
推薦教學：《微信小程序》