揭秘小程序开发：打造自定义上午/下午时间选择器

2023-10-01 11:01:36

在小程序开发中，构建一个直观且用户友好的时间选择器至关重要。在本文中，我们将深入探讨如何利用 picker 组件创建带有上午/下午选择的自定义时间选择器，并分享其背后的关键技术概念。

理解 picker 组件

picker 组件是小程序中一种强大的原生控件，用于呈现选择列表。它提供了诸如单列选择、多列选择和日期选择等多种选项。在我们的情况下，我们将使用日期选择模式来实现时间选择器。

创建上午/下午选项

为了实现上午/下午选项，我们需要在 picker 组件中定义两个额外的数组：

const hourList = [
  {
    name: '上午',
    value: 0,
  },
  {
    name: '下午',
    value: 12,
  },
];

const minuteList = [
  '00',
  '15',
  '30',
  '45',
];

hourList 数组包含上午和下午选项，而 minuteList 数组包含分钟选项。

整合 picker 组件

使用上述数组，我们可以整合 picker 组件：

<picker mode="date" value="{{date}}" onChange="{{bindChange}}">
  <picker-view id="hour" column="{{hourList}}" value="{{hour}}"></picker-view>
  <picker-view id="minute" column="{{minuteList}}" value="{{minute}}"></picker-view>
</picker>

hour 和 minute 表示选定的小时和分钟。
hourList 和 minuteList 分别引用我们之前定义的数组。
bindChange 是一个处理时间选择更改的事件处理程序。

格式化时间值

在 bindChange 事件处理程序中，我们需要格式化选定的时间值以显示上午/下午选择：

bindChange: function (e) {
  const { hour, minute } = e.detail.value;
  const ampm = hourList[hour].name;
  const formattedTime = `${ampm} ${minute}:00`;
  this.setData({
    formattedTime,
  });
}

展示选定的时间

最后，我们将选定的时间显示在用户界面中：