Skip to content

TimeDurationPicker 时长选择

时长/时间间隔选择组件,支持“不限”选项。

引入

组件位置

/feeder/pages/component/timeDurationPicker/index

app.jsonindex.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初始选中的分钟数number0
hasUnlimited是否显示“不限”选项booleanfalse

Events

事件名说明回调参数
change时间改变时触发totalMinutes: number (不限则返回 0)
pickstart开始滚动选择时触发-
pickend滚动选择结束时触发-

注意事项

  • 分钟间隔:组件固定为 5 分钟一个间隔(0, 5, 10, ..., 55)。
  • 0 小时逻辑:当选择 0 小时时,分钟会自动从 5 分钟起跳(避免选择 0 小时 0 分钟)。
  • 不限选项:开启 hasUnlimited 后,第一项显示为“不限”,选中时 change 事件返回 0,分钟列显示为 --