微信小程序 swiper組件詳解及實例代碼
更新時間：2016年10月25日 09:39:59 投稿：lqh
這篇文章主要介紹了微信小程序 swiper組件詳解及實例代碼的相關(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"> 是否顯示面板指示點 </button>
<button bindtap="changeAutoplay"> 是否自動切換 </button>
<slider bindchange="intervalChange" show-value min="1000" max="2000"/> 自動切換時間間隔
<slider bindchange="durationChange" show-value min="1800" max="10000"/> 滑動動畫時長
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
},
//是否顯示面板指示點
changeIndicatorDots: function(e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
//是否自動切換
changeAutoplay: function(e) {
this.setData({
autoplay: !this.data.autoplay
})
},
//自動切換時間間隔
intervalChange: function(e) {
this.setData({
// e.detail.value獲取slider的值
interval: e.detail.value
})
},
//滑動動畫時長
durationChange: function(e) {
this.setData({
duration: e.detail.value
})
},
//當(dāng)頁面改變是會觸發(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;
}
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
這篇文章主要介紹了TypeScript遍歷對象屬性的問題，文章圍繞TypeScript遍歷對象屬性的相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
Web應(yīng)用開發(fā)TypeScript使用詳解
這篇文章主要為大家介紹了Web應(yīng)用開發(fā)TypeScript的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
Servlet3.0與純javascript通過Ajax交互的實例詳解
Servlet與純javascript通過Ajax交互,對于很多人來說應(yīng)該很簡單。不過還是寫寫，方便Ajax學(xué)習(xí)的后來者2018-03-03
這篇文章主要介紹了微信小程序 五星評分(包括半顆星評分)實例代碼的相關(guān)資料,需要的朋友可以參考下2016-12-12
這篇文章主要為大家介紹了深入理解函數(shù)執(zhí)行上下文 this示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了微信小程序 textarea 組件詳解及簡單實例的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹JS 基本概念，對于初學(xué)者來說，Javascript 乍一看似乎很容易，因為它的類似于 C 的語法，但不管它的運(yùn)行方式如何，對語言 (ESNext) 及其框架所做的不斷變化可能會讓初學(xué)者不知所措。下面我們就來看JS 初學(xué)者怎么入門吧2021-10-10
這篇文章主要為大家介紹了詳解無界微前端是如何渲染子應(yīng)用demo解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要為大家介紹了前端算法題解leetcode36-有效的數(shù)獨示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了js面試題繼承的方法及優(yōu)缺點解答，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09