字节跳动小程序开发组件文档 slider

由 卓别林 创建, 最后一次修改 2019-08-09

滑动选择器。

属性名 类型 默认值 说明 最低版本
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 完成一次拖动后触发的事件,event.detail = {value: value} 1.0.0
bindchanging EventHandle 拖动过程中触发的事件,event.detail = {value: value} 1.0.0

示例


开发者工具中预览


<view class="page-section page-section-gap">
  <view class="page-section-title">设置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">设置最小/最大值</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 + '发生change事件,携带值为', e.detail.value)
    }
  })(i)
}
Page(pageData)


以上内容是否对您有帮助:
二维码
建议反馈
二维码