TimePicker 时间选择器

介绍

支持选择小时分钟的选择器

使用指南

一般用法

定义初始时间

<tms-time-picker initial-minute="40" initial-hour="20" bind:change="onTimeChange"/>

自定义显示数值

<tms-time-picker filter="{{filter}}"/>

Component({
  data: {
    filter(type, value) {
      if (type === 'hour') {
        return `${value}h`;
      } else if (type === 'minute') {
        return `${value}m`;
      }
      return value;
    },
  },
})

定义数字样式间隔

<tms-time-picker item-height="120rpx"/>

API

属性	说明	类型	默认值	版本
initial-hour	小时默认值	number	0
initial-minute	分钟默认值	number	0
filter	自定义每一项文案	function
cell-height	单行元素高度	string	88rpx
list-height	选择器内容区域高度	string	200rpx
root-style	自定义组件根元素容器style	string	-
action-style	自定义头部文案区域元素style	string	-
picker-list-style	自定义滚动区域容器元素style	string	-
show-action-bar	是否显示顶部栏	boolean	true
left-text	顶部栏左侧文案	string	''
right-text	顶部栏右侧文案	string	''
title	顶部栏中间标题	string	''

EVENTS

属性	说明	类型
bind:on-change	用户改变时间事件	(event) => {}
bind:on-click-title	点击标题事件	(event) => {}
bind:on-click-left-button	点击左侧文字事件	(event) => {}
bind:on-click-right-button	点击右侧文字事件	(event) => {}

CSS变量

// 组件根容器padding
--picker-container-padding: 38rpx 46rpx;
// 背景色
--picker-background-color: #FFFFFF;
// 头部文案区域元素的line-height
--picker-action-line-height: 44rpx;
// 标题font-size
--picker-title-font-size: 27rpx;
// 左右文案元素的font-size
--picker-action-button-font-size: 24rpx;
// 右侧文案元素 color
--picker-confirm-button-color: #3886F2;
// 左侧文案元素 color
--picker-cancel-button-color: #969799;
// 内容区域高度，可控制显示几行元素。
--picker-list-height: 200rpx;
// 滚动元素font-size
--picker-cell-font-size: 27rpx;
// 滚动元素color
--picker-cell-text-color: @text-color;
// 滚动元素当前居中元素的 color
--picker-cell-selected-text-color: @text-color;
// 分隔线高度
--picker-midline-size: 2rpx;
// 分隔线颜色
--picker-midline-color: #97979730;

FAQ