這篇文章主要介紹了微信小程序的輪播功能怎么實現(xiàn),具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)建站成立與2013年,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項目成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)網(wǎng)站策劃,項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元崗巴做網(wǎng)站,已為上家服務(wù),為崗巴各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108我們在官網(wǎng)上可以看到輪播相關(guān)的說明了,這里是通過一個實例來說明一下微信小程序的輪播功能的實現(xiàn)效果:
先看一下效果圖:
JS代碼:
var app = getApp(); Page({ data: { imgUrls: [ 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' ], indicatorDots: true, autoplay: false, interval: 5000, duration: 1000 }, changeIndicatorDots: function(e) { this.setData({ indicatorDots: !this.data.indicatorDots }) }, changeAutoplay: function(e) { this.setData({ autoplay: !this.data.autoplay }) }, intervalChange: function(e) { this.setData({ interval: e.detail.value }) }, durationChange: function(e) { this.setData({ duration: e.detail.value }) }, })
data中是要設(shè)置的數(shù)據(jù)。indicatorDots設(shè)置是否有點,interval設(shè)置每隔多少毫秒進(jìn)行切換,duration設(shè)置切換的速度。中對所有的照片進(jìn)行遍歷。這些值通過data然后在函數(shù)中進(jìn)行設(shè)置。
WXML代碼:
<swiper indicator-dots="{{indicatorDots}}" autoplay="true" interval="5000" duration="1000"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" class="slide-image" width="400" height="150"/> </swiper-item> </block> </swiper>
以上就是這個輪播的的過程,主要應(yīng)用組件,autoplay設(shè)置是否自動播放,interval設(shè)置每隔多少毫秒進(jìn)行切換,duration設(shè)置切換的速度。中對所有的照片進(jìn)行遍歷。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“微信小程序的輪播功能怎么實現(xiàn)”這篇文章對大家有幫助,同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司,,關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
本文標(biāo)題:微信小程序的輪播功能怎么實現(xiàn)-創(chuàng)新互聯(lián)
地址分享:http://muchs.cn/article40/cddjeo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供動態(tài)網(wǎng)站、網(wǎng)站排名、電子商務(wù)、Google、關(guān)鍵詞優(yōu)化、網(wǎng)站設(shè)計公司
聲明:本網(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)容