本文實(shí)例講述了微信小程序swiper組件用法。分享給大家供大家參考,具體如下:
關(guān)于視圖容器swiper的詳細(xì)內(nèi)容可參考官方文檔
先來看看運(yùn)行效果:
index.js:
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 }) } })
index.wxml:
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}" wx:key="{{index}}"> <swiper-item> <image src="{{item}}" class="slide-image" width="355" height="150" ></image> <text class="textindex">{{index}}</text> </swiper-item> </block> </swiper> <button bindtap="changeIndicatorDots"> indicator-dots ({{indicatorDots}})</button> <button bindtap="changeAutoplay"> autoplay ({{autoplay}})</button> <slider bindchange="intervalChange" show-value min="2000" max="5000"/> interval <slider bindchange="durationChange" show-value min="1000" max="2000"/> duration
index.wxss:
.slide-image{ display: inline; } .textindex{ position: absolute; top :20px; color: red; }
上面是我整理給大家的,希望今后會對大家有幫助。
相關(guān)文章:
如何通過全局方法使用Vue.use()組件
在JavaScrip中關(guān)于創(chuàng)建常量(詳細(xì)教程)
在js中如何實(shí)現(xiàn)關(guān)閉網(wǎng)頁出現(xiàn)離開提示(詳細(xì)教程)
在JavaScript語句中有關(guān)后面的分號問題
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com