小編給大家分享一下小程序中swiper組件實(shí)現(xiàn)圖片輪播切換功能的示例,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創(chuàng)新互聯(lián)成立以來(lái)不斷整合自身及行業(yè)資源、不斷突破觀念以使企業(yè)策略得到完善和成熟,建立了一套“以技術(shù)為基點(diǎn),以客戶需求中心、市場(chǎng)為導(dǎo)向”的快速反應(yīng)體系。對(duì)公司的主營(yíng)項(xiàng)目,如中高端企業(yè)網(wǎng)站企劃 / 設(shè)計(jì)、行業(yè) / 企業(yè)門戶設(shè)計(jì)推廣、行業(yè)門戶平臺(tái)運(yùn)營(yíng)、app軟件開發(fā)公司、移動(dòng)網(wǎng)站建設(shè)、微信網(wǎng)站制作、軟件開發(fā)、遂寧托管服務(wù)器等實(shí)行標(biāo)準(zhǔn)化操作,讓客戶可以直觀的預(yù)知到從創(chuàng)新互聯(lián)可以獲得的服務(wù)效果。1、效果展示
2、關(guān)鍵代碼
index.wxml:
<swiper indicator-dots="true"autoplay="true" interval="3000" duration="600" style="height:300px;"> <swiper-item> <image src="../../pages/images/img1.png" style="display: block;height: 300px;"/> </swiper-item> <swiper-item> <image src="../../pages/images/img2.png" style="display: block;height: 300px;"/> </swiper-item> <swiper-item> <image src="../../pages/images/img3.png" style="display: block;height: 300px;"/> </swiper-item> </swiper>
swiper組件屬性說(shuō)明如下:
屬性名 | 類型 | 默認(rèn)值 | 說(shuō)明 | 最低版本 |
---|---|---|---|---|
indicator-dots | Boolean | false | 是否顯示面板指示點(diǎn) | |
indicator-color | Color | rgba(0, 0, 0, .3) | 指示點(diǎn)顏色 | 1.1.0 |
indicator-active-color | Color | #000000 | 當(dāng)前選中的指示點(diǎn)顏色 | 1.1.0 |
autoplay | Boolean | false | 是否自動(dòng)切換 | |
current | Number | 0 | 當(dāng)前所在頁(yè)面的 index | |
interval | Number | 5000 | 自動(dòng)切換時(shí)間間隔 | |
duration | Number | 500 | 滑動(dòng)動(dòng)畫時(shí)長(zhǎng) | |
circular | Boolean | false | 是否采用銜接滑動(dòng) | |
vertical | Boolean | false | 滑動(dòng)方向是否為縱向 | |
bindchange | EventHandle | current 改變時(shí)會(huì)觸發(fā) change 事件,event.detail = {current: current, source: source} |
以上是“小程序中swiper組件實(shí)現(xiàn)圖片輪播切換功能的示例”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
本文題目:小程序中swiper組件實(shí)現(xiàn)圖片輪播切換功能的示例-創(chuàng)新互聯(lián)
當(dāng)前地址:http://jinyejixie.com/article40/ggseo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供Google、商城網(wǎng)站、網(wǎng)站營(yíng)銷、軟件開發(fā)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容