钉钉小程序时间选择组件

问题

虽然钉钉小程序自带了时间选择 api。

但是这个功能所展示的 ui 界面在 ios 和安卓系统上并不一致。

而且在 ios 上日期是一行行去滑动的，导致选择跨年或跨月日期就要滑动很久。

基于以上2点考虑，决定自己开发组件，以满足功能需求。

效果图如下。

实现

因为系统全局引入了 colorUI，所以在组件中也用到了相关样式，引入参考：
https://blog.csdn.net/weixin_43930421/article/details/124748879

在 components 文件目录下新建 tmSelect 组件

tmSelect.axml

<view>
  <view onTap="show">
    <text class="margin-left-xs margin-right-xs">
      {
  { selectLab || desc }}
    </text>
    <text class="cuIcon-unfold"></text>
  </view>
  <view a:if="{
    {showModal}}" class="cu-modal bottom-modal show">
    <view class="cu-dialog" style="width:100vw">
      <view class="cu-bar bg-white solid-bottom">
        <view class="action" onTap="show">
          <text class="text-blue">取消</text>
        </view>
        <view class="action" onTap="confirm">
          <text class="text-blue margin-right">确定</text>
        </view>
      </view>
      <view style="height:500rpx">
        <picker-view value="{
    {value}}" onChange="tmChange">
          <picker-view-column>
            <view a:for="{
    {yList}}">{
  {item.label}}</view>
          </picker-view-column>
          <picker-view-column>
            <view a:for="{
    {mList}}">{
  {item.label}}</view>
          </picker-view-column>
          <picker-view-column>
            <view a:for="{
    {dList}}">{
  {item.label}}</view>
          </picker-view-column>
          <picker-view-column>
            <view a:for="{
    {hList}}"