微信小程序 swiper組件詳解及實(shí)例代碼
更新時(shí)間:2016年10月25日 09:39:59 投稿:lqh
這篇文章主要介紹了微信小程序 swiper組件詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
微信小程序 swiper組件
常用屬性:

效果圖:

swiper.wxml添加代碼:
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}} " bindchange="bindchangeTag">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image"/>
</swiper-item>
</block>
</swiper>
<button bindtap="changeIndicatorDots"> 是否顯示面板指示點(diǎn) </button>
<button bindtap="changeAutoplay"> 是否自動(dòng)切換 </button>
<slider bindchange="intervalChange" show-value min="1000" max="2000"/> 自動(dòng)切換時(shí)間間隔
<slider bindchange="durationChange" show-value min="1800" max="10000"/> 滑動(dòng)動(dòng)畫(huà)時(shí)長(zhǎng)
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: 1000,
duration: 1800
},
//是否顯示面板指示點(diǎn)
changeIndicatorDots: function(e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
//是否自動(dòng)切換
changeAutoplay: function(e) {
this.setData({
autoplay: !this.data.autoplay
})
},
//自動(dòng)切換時(shí)間間隔
intervalChange: function(e) {
this.setData({
// e.detail.value獲取slider的值
interval: e.detail.value
})
},
//滑動(dòng)動(dòng)畫(huà)時(shí)長(zhǎng)
durationChange: function(e) {
this.setData({
duration: e.detail.value
})
},
//當(dāng)頁(yè)面改變是會(huì)觸發(fā)
bindchangeTag:function(e){
console.log("bindchangeTag...")
},
onLoad:function(options){
// 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
},
onReady:function(){
// 頁(yè)面渲染完成
},
onShow:function(){
// 頁(yè)面顯示
},
onHide:function(){
// 頁(yè)面隱藏
},
onUnload:function(){
// 頁(yè)面關(guān)閉
}
})
css:
.slide-image{
width: 100%;
height: 160px;
}
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
您可能感興趣的文章:
- 微信小程序滾動(dòng)Tab實(shí)現(xiàn)左右可滑動(dòng)切換
- 微信小程序scroll-view組件實(shí)現(xiàn)滾動(dòng)動(dòng)畫(huà)
- 微信小程序scroll-view實(shí)現(xiàn)滾動(dòng)穿透和阻止?jié)L動(dòng)的方法
- 微信小程序?qū)崿F(xiàn)自上而下字幕滾動(dòng)
- 微信小程序 swiper組件輪播圖詳解及實(shí)例
- 微信小程序 swiper制作tab切換實(shí)現(xiàn)附源碼
- 微信小程序 解決swiper不顯示圖片的方法
- 微信小程序 輪播圖swiper詳解及實(shí)例(源碼下載)
- 微信小程序?qū)崿F(xiàn)圖片滾動(dòng)效果示例
相關(guān)文章
Web應(yīng)用開(kāi)發(fā)TypeScript使用詳解
這篇文章主要為大家介紹了Web應(yīng)用開(kāi)發(fā)TypeScript的使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-05-05
Servlet3.0與純javascript通過(guò)Ajax交互的實(shí)例詳解
Servlet與純javascript通過(guò)Ajax交互,對(duì)于很多人來(lái)說(shuō)應(yīng)該很簡(jiǎn)單。不過(guò)還是寫(xiě)寫(xiě),方便Ajax學(xué)習(xí)的后來(lái)者2018-03-03
微信小程序 五星評(píng)分(包括半顆星評(píng)分)實(shí)例代碼
這篇文章主要介紹了微信小程序 五星評(píng)分(包括半顆星評(píng)分)實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-12-12
微信小程序 textarea 組件詳解及簡(jiǎn)單實(shí)例
這篇文章主要介紹了微信小程序 textarea 組件詳解及簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-01-01
詳解無(wú)界微前端是如何渲染子應(yīng)用的demo解析
這篇文章主要為大家介紹了詳解無(wú)界微前端是如何渲染子應(yīng)用demo解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04
前端算法題解leetcode36-有效的數(shù)獨(dú)示例
這篇文章主要為大家介紹了前端算法題解leetcode36-有效的數(shù)獨(dú)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09

