Slider 滑块

引入

app.jsonindex.json中引入组件,详细介绍见快速上手

  1. "usingComponents": {
  2. "van-slider": "path/to/@vant/weapp/dist/slider/index"
  3. }

基本用法

  1. <van-slider value="50" bind:change="onChange" />
  1. Page({
  2. onChange(event) {
  3. wx.showToast({
  4. icon: 'none',
  5. title: `当前值:${event.detail}`
  6. });
  7. }
  8. });

指定选择范围

  1. <van-slider min="-50" max="50" />

禁用

  1. <van-slider value="50" disabled />

指定步长

  1. <van-slider value="50" step="10" />

自定义样式

  1. <van-slider
  2. value="50"
  3. bar-height="4px"
  4. active-color="#ee0a24"
  5. />

自定义按钮

  1. <van-slider
  2. value="{{ currentValue }}"
  3. use-button-slot
  4. bind:drag="onDrag"
  5. >
  6. <view class="custom-button" slot="button">
  7. {{ currentValue }}/100
  8. </view>
  9. </van-slider>
  1. Page({
  2. data: {
  3. currentValue: 50
  4. },
  5. onDrag(event) {
  6. this.setData({
  7. currentValue: event.detail.value
  8. });
  9. }
  10. });

API

Props

参数说明类型默认值版本
value当前进度百分比,取值范围为 0-100number0-
disabled是否禁用滑块booleanfalse-
max最大值number100-
min最小值number0-
step步长number1-
bar-height进度条高度,默认单位为 pxstring | number2px-
active-color进度条激活态颜色string#1989fa-
inactive-color进度条默认颜色string#e5e5e5-

Events

事件名说明参数
bind:drag拖动进度条时触发event.detail.value: 当前进度
bind:change进度值改变后触发event.detail: 当前进度
bind:drag-start开始拖动时触发-
bind:drag-end结束拖动时触发-

外部样式类

类名说明
custom-class根节点样式类

Slider 滑块 - 图1