微信小程序表單組件滑動(dòng)選擇器slider,slider滑動(dòng)選擇器
2017-12-22
導(dǎo)讀:slider 滑動(dòng)選擇器。 屬性名 類型 默認(rèn)值 說明 min Number 0 最小值 max Number 100 最大值 step Number 1 步長,取值必須大于 0,并且可被(max - min)整除 disabled Boolean false 是否禁用 value Number 0 當(dāng)前取...
slider
滑動(dòng)選擇器。
屬性名 | 類型 | 默認(rèn)值 | 說明 |
---|---|---|---|
min | Number | 0 | 最小值 |
max | Number | 100 | 最大值 |
step | Number | 1 | 步長,取值必須大于 0,并且可被(max - min)整除 |
disabled | Boolean | false | 是否禁用 |
value | Number | 0 | 當(dāng)前取值 |
color | Color | #e9e9e9 | 背景條的顏色(請使用 backgroundColor) |
selected-color | Color | #1aad19 | 已選擇的顏色(請使用 activeColor) |
activeColor | Color | #1aad19 | 已選擇的顏色 |
backgroundColor | Color | #e9e9e9 | 背景條的顏色 |
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)
第二部分:如何開通一個(gè)小商店