微信小程序 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)畫時(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)畫時(shí)長(zhǎng)
durationChange: function(e) {
this.setData({
duration: e.detail.value
})
},
//當(dāng)頁面改變是會(huì)觸發(fā)
bindchangeTag:function(e){
console.log("bindchangeTag...")
},
onLoad:function(options){
// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
},
onReady:function(){
// 頁面渲染完成
},
onShow:function(){
// 頁面顯示
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關(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)畫
- 微信小程序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)用開發(fā)TypeScript使用詳解
這篇文章主要為大家介紹了Web應(yīng)用開發(fā)TypeScript的使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-05-05
Servlet3.0與純javascript通過Ajax交互的實(shí)例詳解
Servlet與純javascript通過Ajax交互,對(duì)于很多人來說應(yīng)該很簡(jiǎn)單。不過還是寫寫,方便Ajax學(xué)習(xí)的后來者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
前端算法題解leetcode36-有效的數(shù)獨(dú)示例
這篇文章主要為大家介紹了前端算法題解leetcode36-有效的數(shù)獨(dú)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09

