微信小程序 教程之wxapp視圖容器 swiper
相關(guān)文章:
微信小程序視圖容器:swiper
滑動(dòng)面板
滑動(dòng)面板
屬性名 | 類型 | 默認(rèn)值 | 說(shuō)明 |
---|---|---|---|
indicator-dots | Boolean | false | 是否顯示面板指示點(diǎn) |
autoplay | Boolean | false | 是否自動(dòng)切換 |
current | Number | 0 | 當(dāng)前所在頁(yè)面的index |
interval | Number | 5000 | 自動(dòng)切換時(shí)間間隔 |
duration | Number | 1000 | 滑動(dòng)動(dòng)畫時(shí)長(zhǎng) |
bindchange | EventHandle | current改變時(shí)會(huì)觸發(fā)change事件,event.detail={current:current} |
注意:其中只可放置swiper-item組件,其他節(jié)點(diǎn)會(huì)被自動(dòng)刪除
swiper-item
僅可放置在swiper組件中,寬高自動(dòng)設(shè)置為100%
示例代碼:
<swpier indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for-items="{{imgUrls}}"> <swpier-item> <image src="{{item}}" class="slide-image" width="355" height="150"/> </swpier-item> </block> </swpier> <button bindtap="changeIndicatorDots"> indicator-dots </button> <button bindtap="changeAutoplay"> autoplay </button> <slider bindchange="intervalChange" show-value min="500" max="2000"/> interval <slider bindchange="durationChange" show-value min="1000" max="10000"/> duration 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: false, 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 }) } })
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
微信小程序 textarea 組件詳解及簡(jiǎn)單實(shí)例
這篇文章主要介紹了微信小程序 textarea 組件詳解及簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-01-01高級(jí)前端必會(huì)的package.json字段知識(shí)詳解
這篇文章主要為大家介紹了高級(jí)前端必會(huì)的package.json字段知識(shí)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07JavaScript?ES6語(yǔ)法中l(wèi)et,const?,var?的區(qū)別
這篇文章主要為大家介紹了JavaScript中l(wèi)et,const?,var?的區(qū)別,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-01-01微信小程序 form組件詳解及簡(jiǎn)單實(shí)例
這篇文章主要介紹了微信小程序 form組件詳解及簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-01-01Promise靜態(tài)四兄弟實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了Promise靜態(tài)四兄弟實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07