slider

滑动选择器。

属性名类型默认值说明
minNumber0最小值
maxNumber100最大值
stepNumber1步长，取值必须大于0，并且可被(max-min)整除
disabledBooleanfalse是否禁用
valueNumber0当前取值
colorColor#e9e9e9背景条的颜色（请使用 background-color）
selected-colorColor#1aad19已选择的颜色（请使用 active-color）
active-colorColor#1aad19已选择的颜色
background-colorColor#e9e9e9背景条的颜色
block-sizeNumber28滑块的大小，取值范围为 12 - 28
block-colorColor#ffffff滑块的颜色
show-valueBooleanfalse是否显示当前 value
bindchangeEventHandle完成一次拖动后触发的事件，event.detail = {value: value}
bindchangingEventHandle拖动过程中触发的事件，event.detail = {value: value}

示例

  2. <view class="page-section page-section-gap">
  3.   <view class="page-section-title">设置step</view>
  4.   <view class="body-view">
  5.     <slider value="60" bindchange="slider2change" step="5"/>
  6.   </view>
  7. </view>
  9. <view class="page-section page-section-gap">
  10.   <view class="page-section-title">显示当前value</view>
  11.   <view class="body-view">
  12.     <slider value="50" bindchange="slider3change" show-value/>
  13.   </view>
  14. </view>
  16. <view class="page-section page-section-gap">
  17.   <view class="page-section-title">设置最小/最大值</view>
  18.   <view class="body-view">
  19.     <slider value="100" bindchange="slider4change" min="50" max="200" show-value/>
  20.   </view>
  21. </view>
  1. var pageData = {}
  2. for (var i = 1; i < 5; ++i) {
  3.   (function (index) {
  4.     pageData['slider' + index + 'change'] = function(e) {
  5.       console.log('slider' + index + '发生change事件，携带值为', e.detail.value)
  6.     }
  7.   })(i)
  8. }
  9. Page(pageData)

slider - 图1

原文: https://developer.toutiao.com/docs/comp/slider.html