Appearance
TimeDurationPicker 时长选择
时长/时间间隔选择组件,支持“不限”选项。
引入
组件位置
/feeder/pages/component/timeDurationPicker/index
在 app.json 或 index.json 中引入组件:
json
"usingComponents": {
"timeDurationPicker": "/feeder/pages/component/timeDurationPicker/index"
}代码演示
基础用法
xml
<timeDurationPicker
defaultMinutes="{{ 90 }}"
bind:change="onChange"
/>带“不限”选项
xml
<timeDurationPicker
defaultMinutes="{{ 0 }}"
hasUnlimited="{{ true }}"
bind:change="onChange"
/>API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| defaultMinutes | 初始选中的分钟数 | number | 0 |
| hasUnlimited | 是否显示“不限”选项 | boolean | false |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 时间改变时触发 | totalMinutes: number (不限则返回 0) |
| pickstart | 开始滚动选择时触发 | - |
| pickend | 滚动选择结束时触发 | - |
注意事项
- 分钟间隔:组件固定为 5 分钟一个间隔(0, 5, 10, ..., 55)。
- 0 小时逻辑:当选择 0 小时时,分钟会自动从 5 分钟起跳(避免选择 0 小时 0 分钟)。
- 不限选项:开启
hasUnlimited后,第一项显示为“不限”,选中时change事件返回0,分钟列显示为--。