uni-app 有没有动态时间组件，类似于手机时间

在 uni-app 中，虽然没有一个官方直接提供的动态时间选择器组件，但你可以通过自定义组件和现有的日期时间选择器库来实现类似手机时间选择的功能。以下是一个简单的示例，展示如何创建一个动态时间选择器组件。

首先，你可以使用 uni-ui 库中的日期选择器作为基础，然后进行定制以满足时间选择的需求。不过为了简洁，这里我们直接编写一个简单的时间选择器组件。

1. 创建时间选择器组件 TimePicker.vue

<template>
  <view class="time-picker">
    <picker mode="time" :value="time" @change="bindTimeChange">
      <view class="picker">
        {{ formatTime(time) }}
      </view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      time: '00:00'
    };
  },
  methods: {
    bindTimeChange(e) {
      this.time = e.detail.value;
      this.$emit('change', this.time);
    },
    formatTime(time) {
      const date = new Date();
      date.setHours(parseInt(time.split(':')[0], 10));
      date.setMinutes(parseInt(time.split(':')[1], 10));
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      return `${hours}:${minutes}`;
    }
  }
};
</script>

<style scoped>
.time-picker {
  padding: 20px;
}
.picker {
  font-size: 16px;
  text-align: center;
}
</style>

2. 在页面中使用时间选择器组件

<template>
  <view>
    <TimePicker @change="handleTimeChange" />
  </view>
</template>

<script>
import TimePicker from '@/components/TimePicker.vue';

export default {
  components: {
    TimePicker
  },
  methods: {
    handleTimeChange(time) {
      console.log('Selected Time:', time);
      // 在这里处理选中的时间
    }
  }
};
</script>

说明

1. TimePicker.vue 组件使用 picker 标签的 time 模式来创建一个时间选择器。
2. bindTimeChange 方法处理时间变化事件，更新组件内部状态并通过 $emit 触发 change 事件。
3. formatTime 方法用于格式化时间显示。
4. 在页面中引入并使用 TimePicker 组件，监听 change 事件以获取用户选择的时间。

这个示例提供了一个基础的时间选择器功能，你可以根据需要进一步定制样式和功能。