微信小程序 slider 詳解及實(shí)例代碼

屬性名	類(lèi)型	默認(rèn)值	說(shuō)明
min	Number	0	最小值
max	Number	100	最大值
step	Number	1	步長(zhǎng)，取值必須大于 0，并且可被 (max - min) 整除
disabled	Boolean	false	是否禁用
value	Number	0	當(dāng)前取值
show-value	Boolean	false	是否顯示當(dāng)前value
bindchange	EventHandle		完成一次拖動(dòng)后觸發(fā)的事件，event.detail = {value:value}

示例代碼：

<view class="section section_gap"> <text class="section__title">設(shè)置left/right icon</text> <view class="body-view"> <slider bindchange="slider1change" left-icon="cancel" right-icon="success_no_circle"/> </view></view><view class="section section_gap"> <text class="section__title">設(shè)置step</text> <view class="body-view"> <slider bindchange="slider2change" step="5"/> </view></view><view class="section section_gap"> <text class="section__title">顯示當(dāng)前value</text> <view class="body-view"> <slider bindchange="slider3change" show-value/> </view></view><view class="section section_gap"> <text class="section__title">設(shè)置最小/最大值</text> <view class="body-view"> <slider bindchange="slider4change" min="50" max="200" show-value/> </view></view>

var pageData = {}for(var i = 1; i < 5; ++i) { (function (index) { pageData[`slider${index}change`] = function(e) { console.log(`slider${index}發(fā)生change事件，攜帶值為`, e.detail.value) } })(i);}Page(pageData)

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

上一篇：微信小程序 radio單選框組件詳解及實(shí)例代碼

下一篇：微信小程序 switch組件詳解及簡(jiǎn)單實(shí)例