更新记录

1.0.1（2025-08-13） 下载此版本

提交

平台兼容性

uni-app(4.71)

uni-app x(4.71)

TimeSlider 时间滑块组件使用说明

组件概述

TimeSlider 是一个基于 uni-app 的时间区间选择组件，支持多时间段的选择和管理。该组件提供了直观的滑块界面，允许用户通过拖拽或点击来设置时间区间。

功能特性

• ✅ 支持多时间段选择
• ✅ 拖拽滑块调整时间
• ✅ 点击轨道添加新时间段
• ✅ 自动合并重叠/相邻区间
• ✅ 时间格式化显示
• ✅ 自定义时间范围和步长
• ✅ 分段标记显示
• ✅ 响应式设计

基本用法

1. 引入组件

<template>
  <view class="container">
    <TimeSlider
      :min="8"
      :max="24"
      @change="onTimeChange"
      :defaultDots="[8, 18]"
      :showSegments="true"
      :segmentNum="4"
    />
  </view>
</template>

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

export default {
  components: { TimeSlider },
  methods: {
    onTimeChange(intervals) {
      console.log('选中的时间区间:', intervals);
    }
  }
};
</script>

2. 基础配置

<TimeSlider
  :min="6"
  :max="24"
  :step="0.5"
  :defaultDots="[8, 12, 14, 18]"
  :showSegments="true"
  :segmentNum="4"
  @change="handleTimeChange"
/>

属性说明

事件说明

change 事件参数格式

// intervals 格式示例
[
  [8, 12],   // 第一个区间：8:00 - 12:00
  [14, 18]   // 第二个区间：14:00 - 18:00
]

使用示例

1. 工作时间选择

<template>
  <view>
    <text class="title">选择工作时间</text>
    <TimeSlider
      :min="8"
      :max="20"
      :defaultDots="[9, 12, 13, 18]"
      @change="onWorkTimeChange"
    />
  </view>
</template>

<script>
export default {
  methods: {
    onWorkTimeChange(intervals) {
      // intervals: [[9, 12], [13, 18]]
      this.workIntervals = intervals;
    }
  }
};
</script>

2. 营业时间设置

<template>
  <view>
    <text class="title">设置营业时间</text>
    <TimeSlider
      :min="0"
      :max="24"
      :step="1"
      :defaultDots="[8, 22]"
      :showSegments="true"
      :segmentNum="6"
      @change="onBusinessHoursChange"
    />
  </view>
</template>

3. 多时段预约

<template>
  <view>
    <text class="title">预约时段</text>
    <TimeSlider
      :min="9"
      :max="21"
      :defaultDots="[9, 11, 14, 16, 18, 20]"
      @change="onAppointmentChange"
    />
  </view>
</template>

交互说明

滑块操作

• 拖拽滑块：长按滑块进行拖拽，调整时间点位置
• 点击轨道：点击轨道空白处添加新的时间点
• 自动合并：当两个区间重叠或相邻时，会自动合并为一个区间

时间显示

• 时间格式：HH:MM（如：08:30, 14:00）
• 支持半小时步长显示（如：08:30, 09:30）
• 滑块下方显示当前时间点

区间高亮

• 选中的时间区间会以红色背景高亮显示
• 区间按添加顺序成对显示

样式定制

组件使用 scoped 样式，如需自定义样式，可以通过以下方式：

<style>
/* 自定义滑块样式 */
.custom-dot {
  background: #007aff !important;
  border-color: #fff !important;
}

/* 自定义轨道样式 */
.slider-track {
  background: #f0f0f0 !important;
}

/* 自定义区间高亮颜色 */
.slider-segment {
  background: #007aff !important;
}
</style>

注意事项

1. 时间点数量：组件会自动确保时间点数量为偶数，奇数个时间点会自动移除最后一个
2. 范围限制：时间点会自动限制在 min-max 范围内
3. 默认区间：如果没有有效区间，会自动生成一个默认区间 [min, min+step]
4. 合并逻辑：重叠或相邻的区间会自动合并，保持时间连续性
5. 步长限制：当前支持 0.5 小时步长，确保时间点对齐

兼容性

• ✅ uni-app 所有平台
• ✅ H5、小程序、App
• ✅ 支持触摸和鼠标操作

更新日志

• v1.0.0：基础时间滑块功能
• 支持多区间选择
• 自动区间合并
• 时间格式化显示