這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)swiper實現(xiàn)輪播效果,以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
員工經(jīng)過長期磨合與沉淀,具備了協(xié)作精神,得以通過團隊的力量開發(fā)出優(yōu)質(zhì)的產(chǎn)品。創(chuàng)新互聯(lián)堅持“專注、創(chuàng)新、易用”的產(chǎn)品理念,因為“專注所以專業(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡單”。公司專注于為企業(yè)提供網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、微信公眾號開發(fā)、電商網(wǎng)站開發(fā),成都微信小程序,軟件定制設(shè)計等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。需要解決的問題uni-app已經(jīng)在基礎(chǔ)組件swiper中已經(jīng)直接支持了輪播動畫。
animate.css
動畫。swiper-item
中。也就是跳轉(zhuǎn)到指定的屏。uni-app開發(fā),所以在小程序中和H5中測試都沒有問題。另外為了方便小程序
開發(fā)同學(xué)了解,會提供小程序
版代碼和uni-app
代碼供參考。
animate.css,其中刪掉了很多-webkit-animation
開頭的css3。因為我們只需要在小程序和H5中運行,這樣做影響也不大。如果需要的話,可以從下面的代碼中獲取。
<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
。問題①circular
這個參數(shù)可以實現(xiàn)類似H5頁面使用swiper.jsloop
參數(shù)的功能。這里我掉到了uni-app
和微信小程序
文檔描述的坑中。因為一直在找loop
(循環(huán))這個參數(shù),我甚至都以為實現(xiàn)不了這個無限循環(huán)的功能了呢。原來小程序
中這個參數(shù)叫做circular
(圓形)。o(╯□╰)o 問題③vertical
設(shè)置為true
。uni-app
中,通過change
事件,可以監(jiān)聽每一個輪播屏的改變。在這個事件中,我記錄的當(dāng)前屏的下標(biāo)current
。然后將非當(dāng)前屏的全部css3動畫取消掉。最后在animationfinish
事件中,當(dāng)swiper
滑動動畫結(jié)束后,給當(dāng)前屏的元素添加css3動畫。問題②uni-app
中有個current-item-id
參數(shù),代表當(dāng)前所在滑塊的 item-id
。這個文檔我看了好久,才明白。原來是需要在swiper-item
中指定上item-id
。然后當(dāng)用戶點擊事件觸發(fā)時,修改綁定到current-item-id
上的值即可。我的代碼初始化時指定到了item-id
為slide2
這一屏上。問題④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é)議打開。
其中生成了兩個版本的代碼,方便大家參考。
上述就是小編為大家分享的swiper實現(xiàn)輪播效果了,如果您也有類似的疑惑,不妨參照上述方法進行嘗試。如果想了解更多相關(guān)內(nèi)容,請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊。
文章題目:swiper實現(xiàn)輪播效果-創(chuàng)新互聯(lián)
網(wǎng)站鏈接:http://bm7419.com/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)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容