ScaleSlider 刻度尺

刻度尺滑动选值器，通过滚动刻度尺来选择数值。

引入

组件位置

/feeder/pages/component/scaleSlider/index

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

"usingComponents": {
  "scaleSlider": "/feeder/pages/component/scaleSlider/index"
}

代码演示

基础用法

<scaleSlider 
  value="{{ 5 }}" 
  upper="{{ 10 }}" 
  lower="{{ 0 }}" 
  step="{{ 0.1 }}"
  scale="{{ 10 }}"
  bind:valueChange="onChange"
/>

自定义单位和步长

<scaleSlider 
  value="{{ 50 }}" 
  upper="{{ 100 }}" 
  lower="{{ 0 }}" 
  step="{{ 1 }}"
  unit="%"
  scale="{{ 5 }}"
  digit="{{ 0 }}"
  bind:valueChange="onChange"
/>

自定义气泡大小

<scaleSlider 
  value="{{ 60 }}" 
  upper="{{ 150 }}" 
  lower="{{ 30 }}" 
  step="{{ 0.1 }}"
  unit="kg"
  bubbleSize="large"
  bind:valueChange="onChange"
/>

API

Props

参数	说明	类型	默认值
value	当前选中的值	number	0
upper	最大值（上限）	number	100
lower	最小值（下限）	number	0
step	步进值（单位长度所代表的数值）	number	1
scale	大刻度间距（多少个步进显示一个大刻度及标签）	number	5
unit	单位符号	string	-
digit	小数位数（显示的值保留的小数位数）	number	0
scroll	是否可以滑动	boolean	true
bubbleSize	气泡大小	string	normal

bubbleSize 选项：

• normal - 普通大小
• large - 较大尺寸

Events

事件名	说明	回调参数
valueChange	值改变时触发	value: string 字符串格式的数值

使用示例

<view>
  <text>体重: {{weight}}</text>
  <scaleSlider 
    value="{{ weight }}" 
    upper="{{ 150 }}" 
    lower="{{ 30 }}" 
    step="{{ 0.1 }}"
    digit="{{ 1 }}"
    unit="kg"
    bind:valueChange="onWeightChange"
  />
</view>

Page({
  data: {
    weight: 60
  },

  onWeightChange(e: any) {
    this.setData({
      weight: e.detail
    });
  }
});

属性详解

value

• 类型：number
• 默认值：0
• 说明：组件当前显示的数值，刻度尺会自动定位到该值对应的位置

upper / lower

• 类型：number
• 说明：设定刻度尺的范围，upper 为最大值，lower 为最小值

step

• 类型：number
• 默认值：1
• 说明：刻度间隔所代表的数值。每个 10px 宽度的刻度代表 step 个单位

scale

• 类型：number
• 默认值：5
• 说明：控制大刻度显示的密度。值为 5 表示每 5 个刻度显示一个大刻度及对应的数字标签

digit

• 类型：number
• 默认值：0
• 说明：控制显示和回调的数值精度，即保留的小数位数

unit

• 类型：string
• 说明：在气泡中显示的单位符号，如 kg、%、cm 等

常见场景

体重选择器

<scaleSlider 
  value="{{ weight }}" 
  upper="{{ 200 }}" 
  lower="{{ 30 }}" 
  step="{{ 0.1 }}"
  digit="{{ 1 }}"
  unit="kg"
  bind:valueChange="onWeightChange"
/>

百分比选择器

<scaleSlider 
  value="{{ percent }}" 
  upper="{{ 100 }}" 
  lower="{{ 0 }}" 
  step="{{ 1 }}"
  unit="%"
  digit="{{ 0 }}"
  bind:valueChange="onPercentChange"
/>

精密值选择器

<scaleSlider 
  value="{{ rate }}" 
  upper="{{ 10 }}" 
  lower="{{ 0 }}" 
  step="{{ 0.1 }}"
  digit="{{ 1 }}"
  bind:valueChange="onRateChange"
/>