全部产品

slider

更新时间:2019-09-09 15:14:10

本文介绍滑动选择器(slider)。

属性名 类型 默认值 描述 最低版本
name String - 组件名字,用于表单提交获取数据 -
min Number 0 最小值 -
max Number 100 最大值 -
step Number 1 步长,值必须大于 0,并可被 (max - min) 整除 -
disabled Boolean false 是否禁用 -
value Number 0 当前取值 -
show-value Boolean false 是否显示当前 value -
active-color String #108ee9 已选择的颜色 -
background-color String #ddd 背景条的颜色 -
track-size Number 4 轨道线条高度 -
handle-size Number 22 滑块大小 -
handle-color String #fff 滑块填充色 -
onChange EventHandle - 完成一次拖动后触发,event.detail = {value: value} -
onChanging EventHandle - 拖动过程中触发的事件,event.detail = {value: value} 1.5.0

图示

代码示例

  1. <view class="section section-gap">
  2. <text class="section-title">设置step</text>
  3. <view class="body-view">
  4. <slider value="60" onChange="sliderChange" step="5"/>
  5. </view>
  6. </view>
  7. <view class="section section-gap">
  8. <text class="section-title">显示当前value</text>
  9. <view class="body-view">
  10. <slider value="50" show-value/>
  11. </view>
  12. </view>
  13. <view class="section section-gap">
  14. <text class="section-title">设置最小/最大值</text>
  15. <view class="body-view">
  16. <slider value="100" min="50" max="200" show-value/>
  17. </view>
  18. </view>
  19. <view class="page-section">
  20. <view class="page-section-title">自定义样式</view>
  21. <view class="page-section-demo">
  22. <slider value="33" onChange="slider4change" min="25" max="50" show-value
  23. backgroundColor="#FFAA00" activeColor="#00aaee" trackSize="2" handleSize="6" handleColor="blue" />
  24. </view>
  25. </view>
  1. Page({
  2. sliderChange(e)
  3. console.log('slider 改变后的值:', e.detail.value)
  4. })