微信小程序时间选择器详解

发布时间：2023-05-18

一、微信小程序时间选择器重复

在微信小程序中，时间选择器是我们常常需要使用的组件，因此我们会发现，微信小程序中有多个不同的时间选择器组件可以使用，有时会让人感到困惑，下面我们来一一介绍它们的特点和使用方式。

二、微信小程序日期时间选择器

微信小程序提供了日期时间选择器组件，适用于需要设置日期和时间的场景。以下是一个简单的例子：

<picker mode="datetime" bindchange="bindDateChange">
  <view class="picker">{{dateTimeArray[dateTimeIndex[0]]}}年{{dateTimeArray[dateTimeIndex[1]]}}月{{dateTimeArray[dateTimeIndex[2]]}}日 {{dateTimeArray[dateTimeIndex[3]]}}:{{dateTimeArray[dateTimeIndex[4]]}}:{{dateTimeArray[dateTimeIndex[5]]}}</view>
</picker>

在上述代码中，我们使用了 picker 组件，并且设置了 mode 属性为 datetime，这表示我们需要同时选择日期和时间。同时，我们还使用了一个 bindchange 事件，以便在选择完成后触发的回调函数对所选时间进行处理。我们使用了 picker 组件的 view 属性，获取选择器中对应位置上的数组值，然后拼接起来，以展示用户选择的时间。

三、微信小程序多列选择器

类似于日期时间选择器，微信小程序中还提供了多列选择器组件，适用于需要选择多个选项并且这些选项有依赖关系的场景。以下是一个简单的例子：

<picker mode="multiSelector" bindcolumnchange="bindColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
  <view class="picker">{{multiArray[0][multiIndex[0]]}}-{{multiArray[1][multiIndex[1]]}}</view>
</picker>

在上述代码中，我们使用了 picker 组件，并且设置了 mode 属性为 multiSelector，这表示我们需要使用多列选择器，其中每个列都有一组选项。同时，我们还使用了一个 bindcolumnchange 事件，以便在滑动列时触发的回调函数对所选选项进行处理。我们使用了 picker 组件的 value 属性，获取选择器当前的值，同时使用了 range 属性，设置各个列上的选项。我们使用 picker 组件的 view 属性，获取选择器中对应位置上的数组值，然后拼接起来以展示用户选择的信息。

四、微信小程序选择时间用不了

在使用微信小程序的时间选择器组件时，我们有时会遇到选择时间用不了的问题。这通常是因为我们的代码中缺少了需要的格式化处理。具体来说，如果我们使用了 picker 组件的 mode 属性为 time，那么我们需要将所选时间进行格式化，以兼容小程序的时间格式。以下是一个示例：

Page({
  data: {
    time: null
  },
  bindTimeChange: function (e) {
    this.setData({
      time: e.detail.value
    })
  },
  timeFormat: function(time) {
    var timeArr = time.split(':');
    return timeArr[0] + '时' + timeArr[1] + '分';
  }
})

在上述代码中，我们使用了 bindTimeChange 事件来获取所选时间，并使用 setData() 方法将所选时间保存在 data 中。同时，我们还编写了一个 timeFormat 函数，在其中对所选时间进行处理，将其格式化为小程序所接受的时间格式。我们在组件视图中使用 timeFormat() 展示用户选择的时间。

五、微信小程序开发选择器选取

在使用微信小程序的时间选择器组件时，我们还需要注意开发者工具中的一个问题，即选择器无法根据滑动的距离确定选中位置。这通常是因为我们在选择器组件的某些属性上设置了过大的值，导致选项过多、距离过大，使得选择器无法精确的定位到用户所选择的选项。为了解决这个问题，我们可以在开发者工具中使用全局 CSS 控制选择器的样式，并且检查 picker-view 的 height 值 是否过大。以下是一份示例的 CSS 代码：

/* 选择器 */
.picker-view {
  height: 180px;
  line-height: 45px;
  overflow: hidden;
  position: relative;
}
.picker-view .picker-view-column {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -webkit-transition: -webkit-transform .3s cubic-bezier(.19, .87, .36, 1);
  transition: -webkit-transform .3s cubic-bezier(.19, .87, .36, 1);
  transition: transform .3s cubic-bezier(.19, .87, .36, 1);
  transition: transform .3s cubic-bezier(.19, .87, .36, 1), -webkit-transform .3s cubic-bezier(.19, .87, .36, 1);
}

在上述代码中，我们将选择器视图的高度设置为 180px，并且使用了一个绝对定位的方式，以便更加方便的控制选择器列上每个选项的样式和布局。同时，我们还使用 -webkit-transition 属性控制选择器列上每个选项的动画效果，使得选择器的动作更加流畅。

推荐文章