Slider 滑块

使用指南

在 app.json 或 index.json 中引入组件

"usingComponents": {
  "van-slider": "/packages/slider/index"
}

基本用法

<van-slider value="50" bind:change="onChange" />

Page({
  onChange(event) {
    wx.showToast({
      icon: 'none',
      title: `当前值：${event.detail}`
    });
  }
});

指定选择范围

<van-slider value="50" min="10" max="90" />

禁用

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

指定步长

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

自定义样式

<van-slider
  value="50"
  bar-height="4px"
  active-color="#f44"
/>

自定义按钮

<van-slider
  value="{{ currentValue }}"
  use-button-slot
  bind:drag="onDrag"
>
  <view class="custom-button" slot="button">
    {{ currentValue }}/100
  </view>
</van-slider>

Page({
  data: {
    currentValue: 50
  },
  onDrag(event) {
    this.setData({
      currentValue: event.detail.value
    });
  }
});

自定义按钮

<van-slider
  value="{{ currentValue }}"
  use-button-slot
  bind:drag="onDrag"
>
  <view class="custom-button" slot="button">
    {{ currentValue }}/100
  </view>
</van-slider>

Page({
  data: {
    currentValue: 30
  },
  onDrag(event) {
    this.setData({
      currentValue: event.detail.value
    });
  }
});

API

Event

外部样式类

更新日志

原文: https://youzan.github.io/vant-weapp/#/slider