微信小程序swiper組件用法實例分析【附源碼下載】
更新時間：2017年12月07日 12:24:16 作者：去海邊生活
這篇文章主要介紹了微信小程序swiper組件用法,結合實例形式分析了微信小程序中swiper組件的功能、使用方法,并附帶完整源碼供讀者下載參考,需要的朋友可以參考下
本文實例講述了微信小程序swiper組件用法。分享給大家供大家參考，具體如下：
關于視圖容器swiper的詳細內容可參考官方文檔
先來看看運行效果：
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;
}
附：完整實例代碼點擊此處本站下載。
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關文章
這篇文章介紹了javascript實現跳轉菜單的具體方法，有需要的朋友可以參考一下2013-07-07
這篇文章主要為大家介紹了JS語法也可以有C#的switch表達式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了JS實現點擊鏈接切換顯示隱藏內容的方法,涉及javascript鼠標事件響應及頁面元素屬性動態(tài)變換相關操作技巧,需要的朋友可以參考下2017-10-10
火狐也不知道為什么，自己功能上，樣式上面，都無法讓其強制換行，這里用JS來實現火狐里面強制換行的方法。2010-06-06
學習js就不得不學他的數組，這篇文章是由色拉油整理下，需要學習js數組的朋友可以參考下2013-10-10
JavaScript數組、json對象、eval()函數用法實例分析
這篇文章主要介紹了JavaScript數組、json對象、eval()函數用法,結合實例形式分析了JS數組創(chuàng)建、賦值、連接、翻轉,json對象定義、讀取,eval()函數的功能、使用等,需要的朋友可以參考下2019-02-02
最近正在開發(fā)一個微信公眾賬號，其中有一項功能是用戶發(fā)送文字消息給公眾號，然后公眾號返回圖文消息給用戶，用戶再點擊圖文消息即可跳轉到一個網頁鏈接，在微信的內置瀏覽器中打開。2014-11-11
這篇文章主要給大家介紹了關于微信小程序+ECharts實現動態(tài)刷新的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
JavaScript?對象新增方法defineProperty與keys的使用說明
這篇文章主要介紹了JavaScript對象新增方法defineProperty與keys的使用說明,文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-09-09
這篇文章主要介紹了微信小程序實現多選框全選與取消全選功能,結合實例形式分析了微信小程序多選框功能實現、布局顯示及全選、取消全選相關操作技巧,需要的朋友可以參考下2019-05-05