Slider 滑动选择器

用于在一个区间内选择特定值。

使用指南

在 page.json 中引入组件

  1. {
  2. "navigationBarTitleText": "Slider",
  3. "usingComponents": {
  4. "wux-icon": "../../dist/icon/index",
  5. "wux-slider": "../../dist/slider/index"
  6. }
  7. }

示例

!> 该组件内部会依据传入的 defaultValuevalue 参数的长度,设置对应个数的滑块,默认只显示一个滑块。

  1. <view class="page">
  2. <view class="page__hd">
  3. <view class="page__title">Slider</view>
  4. <view class="page__desc">滑动选择器</view>
  5. </view>
  6. <view class="page__bd page__bd_spacing">
  7. <view class="sub-title">Default</view>
  8. <wux-slider defaultValue="{{ [10] }}" />
  9. <view class="sub-title">Custom tip</view>
  10. <wux-slider defaultValue="{{ [10] }}" tipFormatter="{d} %" />
  11. <view class="sub-title">No tip</view>
  12. <wux-slider defaultValue="{{ [10] }}" tipFormatter="" />
  13. <view class="sub-title">Disabled</view>
  14. <wux-slider defaultValue="{{ [10] }}" disabled />
  15. <view class="sub-title">Show value</view>
  16. <wux-slider defaultValue="{{ [10] }}" showValue />
  17. <view class="sub-title">Use icons</view>
  18. <wux-slider defaultValue="{{ [10] }}">
  19. <wux-icon wux-class="min" type="ios-volume-mute" slot="min" />
  20. <wux-icon wux-class="max" type="ios-volume-high" slot="max" />
  21. </wux-slider>
  22. <view class="sub-title">Step = 10</view>
  23. <wux-slider defaultValue="{{ [10] }}" showValue step="10" />
  24. <view class="sub-title">Show mark</view>
  25. <wux-slider defaultValue="{{ [100] }}" showMark step="25" markStyle="background-color: red" />
  26. <wux-slider defaultValue="{{ [100] }}" showMark step="25" markStyle="{{ ['background-color: red', 'background-color: yellow', 'background-color: blue'] }}" />
  27. <view class="sub-title">Min and max</view>
  28. <wux-slider defaultValue="{{ [12] }}" showValue step="11" min="0" max="88" />
  29. <view class="sub-title">Controlled</view>
  30. <wux-slider value="{{ value }}" controlled bind:change="onChange" bind:afterChange="afterChange" />
  31. <view class="sub-title">Custom style</view>
  32. <wux-slider defaultValue="{{ [10] }}" railStyle="background-color: blue" trackStyle="background-color: red" handleStyle="background-color: yellow" />
  33. <wux-slider defaultValue="{{ [10, 30, 50] }}" railStyle="background-color: blue" trackStyle="{{ ['background-color: red', 'background-color: yellow'] }}" handleStyle="{{ ['background-color: yellow', 'background-color: red', 'background-color: blue'] }}" />
  34. <view class="sub-title">Range = 2</view>
  35. <wux-slider defaultValue="{{ [10, 30] }}" />
  36. <view class="sub-title">Range = 3</view>
  37. <wux-slider defaultValue="{{ [10, 30, 50] }}" />
  38. </view>
  39. </view>
  1. Page({
  2. data: {
  3. value: [0],
  4. },
  5. onChange(e) {
  6. console.log('onChange', e.detail.value)
  7. this.setData({ value: e.detail.value })
  8. },
  9. afterChange(e) {
  10. console.log('afterChange', e.detail.value)
  11. this.setData({ value: e.detail.value })
  12. },
  13. })

视频演示

Slider

API

Slider props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-slider
min number 最小值 0
max number 最大值 100
step number 步长,取值必须大于 0,并且可被 (max - min) 整除 1
defaultValue array 默认值,当 controlledfalse 时才生效 [0]
value array 当前值,当 controlledtrue 时才生效 [0]
controlled boolean 是否受控 说明文档 false
disabled boolean 是否禁用 false
showMark boolean 是否显示间断点,建议在 step 间隔不密集时使用 false
showValue boolean,object 是否显示最小、大值,参数支持对象格式如 { min: false, max: true } false
tipFormatter string 格式化当前滑块的值并显示 tip,当其为空时隐藏 tip。({d} 为固定写法会被转化为当前滑块的值,如 {d} % 转化为 n % {d}
markStyle string,object,array 间断点的样式,参数支持数组格式如 [ 'background-color: red' ] -
handleStyle string,object,array 滑块的样式,参数支持数组格式如 [ 'background-color: red' ] -
trackStyle string,object,array 选中部分滑动条的样式,参数支持数组格式如 [ 'background-color: red' ] -
railStyle string,object 未选中部分的样式 -
wrapStyle string,object 自定义 wrap 样式 -
bind:change function 拖动过程中触发的回调函数 event.detail = { value: value, offsets: offsets } -
bind:afterChange function 完成一次拖动后触发的回调函数 event.detail = { value: value, offsets: offsets } -

Slider slot

名称 描述
min 自定义左侧内容,当 showValue.minfalse 时才生效
max 自定义右侧内容,当 showValue.maxfalse 时才生效

Slider externalClasses

名称 描述
wux-class 根节点样式类