Slider 滑动选择器

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

使用指南

在 page.json 中引入组件

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

示例

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

  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 默认值，当 controlled 为 false 时才生效 [0]
value array 当前值，当 controlled 为 true 时才生效 [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.min 为 false 时才生效
max 自定义右侧内容，当 showValue.max 为 false 时才生效

Slider externalClasses

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