Slider 滑块钮

使用指南

Component({
  data: {
    value1: 50,
    value2: 10,
    value3: 50,
    value4: 50,
    value5: 50,
    value6: 50,
  },

  onDrag(event) {
    const { key } = event.currentTarget.dataset;
    this.setData({
      [key]: event.detail.value,
    });
  },

  onChange(event) {
    const { key } = event.currentTarget.dataset;
    this.setData({
      [key]: event.detail.value,
    });
    wx.showToast({
      icon: "none",
      title: `当前值是${event.detail.value}`,
    });
  },
});

<view class="container">
  <view>
    基础用法
    <tms-slider data-key="value1" value="{{value1}}" bind:on-change="onChange" />
  </view>

  <view>
    指定选择范围
    <tms-slider
      min="-50"
      max="50"
      data-key="value2"
      value="{{value2}}"
      bind:on-change="onChange"
    />
  </view>

  <view>
    禁用
    <tms-slider
      disabled
      data-key="value3"
      value="{{value3}}"
      bind:on-change="onChange"
    />
  </view>

  <view>
    指定步长
    <tms-slider
      step="10"
      data-key="value4"
      value="{{value4}}"
      bind:on-change="onChange"
    />
  </view>

  <view>
    自定义样式
    <tms-slider
      bar-height="4px"
      active-color="#ee0a24"
      data-key="value5"
      value="{{value5}}"
      bind:on-change="onChange"
    />
  </view>

  <view>
    自定义按钮
    <tms-slider
      active-color="#ee0a24"
      use-button-slot
      data-key="value6"
      value="{{value6}}"
      bind:on-drag="onDrag"
    >
      <view class="slider-custom-button" slot="button"> {{ value6 }} </view>
    </tms-slider>
  </view>
</view>

API

属性	说明	类型	可选值	默认值
value	当前进度百分比，取值范围为 0-100	Number	0-100	0
disabled	是否禁用滑块	Boolean	—	false
max	最大值	Number	—	100
min	最小值	Number	—	0
step	步长	Number	—	1
bar-height	进度条高度，默认单位为 px	String, Number	—	2px
active-color	进度条激活态颜色	String	—	—
inactive-color	进度条默认颜色	String	—	—
use-button-slot	是否使用 button 插槽	Boolean	—	false

EVENTS

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

插槽

插槽名称	说明
button	自定义按钮插槽，需要在useButtonSlot为 true 时才会显示

外部样式类

类名	说明
custom-class	根节点样式类
bar-class	进度条样式类
button-class	按钮样式类

CSS变量

// 容器宽度
--sidebar-container-width: 200rpx;
// 容器高度
--sidebar-container-height: 100%;
// 成员项背景色
--sidebar-item-background: none;
// 选中项背景色
--sidebar-item-selected-background: #F7F7F7;
// 成员项最低高度
--sidebar-item-min-height: 60rpx;
// 成员项容器padding
--sidebar-item-padding: 20rpx 20rpx;
// 禁用状态透明度
--sidebar-item-disable-opacity: .5;
// 选中状态左侧标签背景色
--sidebar-item-selected-tag-background: #ee0a24;