字節(jié)跳動小程序開發(fā)組件文檔 slider

2019-08-09 14:25 更新

滑動選擇器。

屬性名	類型	默認值	說明	最低版本
min	Number	0	最小值	1.0.0
max	Number	100	最大值	1.0.0
step	Number	1	步長，取值必須大于0，并且可被(max-min)整除	1.0.0
disabled	Boolean	false	是否禁用	1.0.0
value	Number	0	當前取值	1.0.0
color	Color	#e9e9e9	背景條的顏色（請使用 background-color）	1.0.0
selected-color	Color	#1aad19	已選擇的顏色（請使用 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	是否顯示當前 value	1.0.0
bindchange	EventHandle	完成一次拖動后觸發(fā)的事件，event.detail = {value: value}		1.0.0
bindchanging	EventHandle	拖動過程中觸發(fā)的事件，event.detail = {value: value}		1.0.0

示例

開發(fā)者工具中預(yù)覽


<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">顯示當前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)

以上內(nèi)容是否對您有幫助：

寫筆記

我要補充