W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
滑動(dòng)選擇器。
屬性名 | 類型 | 默認(rèn)值 | 說明 | 最低版本 |
---|---|---|---|---|
min | Number | 0 | 最小值 | 1.0.0 |
max | Number | 100 | 最大值 | 1.0.0 |
step | Number | 1 | 步長(zhǎng),取值必須大于0,并且可被(max-min)整除 | 1.0.0 |
disabled | Boolean | false | 是否禁用 | 1.0.0 |
value | Number | 0 | 當(dāng)前取值 | 1.0.0 |
color | Color | #e9e9e9 | 背景條的顏色(請(qǐng)使用 background-color) | 1.0.0 |
selected-color | Color | #1aad19 | 已選擇的顏色(請(qǐng)使用 active-color) | 1.0.0 |
active-color | Color | #1aad19 | 已選擇的顏色 | 1.0.0 |
background-color | Color | #e9e9e9 | 背景條的顏色 | 1.0.0 |
block-size | Number | 28 | 滑塊的大小,取值范圍為 12 - 28 | 1.0.0 |
block-color | Color | #ffffff | 滑塊的顏色 | 1.0.0 |
show-value | Boolean | false | 是否顯示當(dāng)前 value | 1.0.0 |
bindchange | EventHandle | 完成一次拖動(dòng)后觸發(fā)的事件,event.detail = {value: value} | 1.0.0 | |
bindchanging | EventHandle | 拖動(dòng)過程中觸發(fā)的事件,event.detail = {value: value} | 1.0.0 |
<view class="page-section page-section-gap">
<view class="page-section-title">設(shè)置step</view>
<view class="body-view">
<slider value="60" bindchange="slider2change" step="5"/>
</view>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">顯示當(dāng)前value</view>
<view class="body-view">
<slider value="50" bindchange="slider3change" show-value/>
</view>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">設(shè)置最小/最大值</view>
<view class="body-view">
<slider value="100" 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)
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: