PickerModal 数值选择

数值/小数弹窗选择组件。

引入

组件位置

/main/pages/component/pickerModal/index

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

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

代码演示

基础用法

<pickerModal 
  is-show-modal="{{ isShow }}" 
  title="体重选择"
  min="{{ 40 }}"
  max="{{ 150 }}"
  unit="kg"
  default-value="{{ 65.0 }}"
  bind:confirm="onConfirm"
  bind:close="onClose"
/>

Page({
  data: {
    isShow: true
  },
  onConfirm(e) {
    console.log('选择的值：', e.detail.value); // 比如 65.5
  },
  onClose() {
    this.setData({ isShow: false });
  }
});

API

Props

参数	说明	类型	默认值
is-show-modal	是否展示弹窗	boolean	false
title	弹窗标题	string	数值选择
type	数值类型，可选值为 decimal (一位小数), integer (整数)	string	decimal
min	最小数值	number	1
max	最大数值（达到 max 时小数位锁定为 .0）	number	5
unit	数值单位	string	-
prefix	左侧前缀文字	string	-
is-reverse	数值数组是否倒序排列	boolean	false
default-value	默认选中值	number	1.0

Events

事件名	说明	回调参数
confirm	点击确定按钮时触发	{ value: number }
close	点击取消按钮或遮罩层时触发	-

内部逻辑说明

1. 自动校准：组件在显示时会根据 default-value 自动计算并滚动到对应位置，并确保值在 min 和 max 之间。
2. 滚动保护：内部维护 isPicking 状态，防止在选择器未停止滚动时点击确认。
3. 小数联动：在 decimal 模式下，若整数位选中 max，小数位数组会动态变更为 [0] 以符合逻辑。
4. 动态更新：支持 min、max 属性的动态监听，属性变化时会自动重新初始化数据。