PickerBox 数值内联选择

数值/小数内联选择组件，常用于表单中直接嵌入的数值选择器。

引入

组件位置

/main/pages/component/pickerBox/index

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

"usingComponents": {
  "pickerBox": "/main/pages/component/pickerBox/index"
}

代码演示

整数模式

设置 type="integer"，仅显示整数列。

<pickerBox 
  type="integer"
  min="{{ 1 }}" 
  max="{{ 100 }}" 
  defaultValue="{{ 50 }}" 
  bind:change="onPickerChange">
</pickerBox>

小数模式

默认 type="decimal"，显示整数列和一位小数列。当整数位选择 max 值时，小数位将自动锁定为 0。

<pickerBox 
  type="decimal"
  min="{{ 1 }}" 
  max="{{ 5 }}" 
  unit="kg"
  defaultValue="{{ 2.5 }}" 
  bind:change="onPickerChange">
</pickerBox>

倒序示例 & 前缀

通过 isReverse 可以反转数值排列顺序，prefix 可在左侧显示固定文字。

<pickerBox 
  type="decimal"
  min="{{ 1 }}" 
  max="{{ 5 }}" 
  isReverse="{{ true }}"
  prefix="选"
  defaultValue="{{ 4.0 }}" 
  bind:change="onPickerChange">
</pickerBox>

API

Props

参数	说明	类型	默认值
type	数值类型，可选值为 decimal (一位小数), integer (整数)	string	decimal
max	最大数值（当整数部分达到 max 时，小数部分仅允许选择 .0）	number	5
min	最小数值	number	1
unit	右侧单位文字	string	-
prefix	左侧前缀文字	string	-
isReverse	数值数组是否倒序排列	boolean	false
defaultValue	默认选中值，支持动态更新	number	1.0

Events

事件名	说明	回调参数
change	选中值改变时触发	detail: number (返回计算后的实际数值)
pickstart	开始滚动选择时触发	detail: { value: Array }
pickend	滚动选择结束时触发	detail: { value: Array }

内部逻辑说明

1. 边界处理：组件内部会对输入值进行 Math.max(min, Math.min(max, value)) 校验。
2. 小数联动：在 decimal 模式下，如果选择了最大的整数，小数位数组会动态切换为 [0]，防止超出 max 范围。
3. 响应式支持：min、max 和 defaultValue 的变更均会触发组件内部数据的重新初始化或位置校准。