uniapp时间轴组件如何使用

在uniapp中如何使用时间轴组件？官方文档没有找到相关说明，请问需要引入第三方组件还是uniapp自带？能否提供一个简单的代码示例，包括如何定义时间轴数据和样式调整？

2 回复

在uniapp中，使用时间轴组件需引入uni-timeline。在template中添加<uni-timeline>，内部用<uni-timeline-item>表示每个节点。通过title、content等属性设置内容，可自定义图标和颜色。


在 UniApp 中使用时间轴组件，可以通过官方扩展组件 uni-steps 或自定义实现。以下是两种方法：

1. 使用官方 uni-steps 组件

适用于步骤条形式的时间轴，展示进度或时间节点。

示例代码：

<template>
  <view>
    <uni-steps :options="steps" :active="currentStep"></uni-steps>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentStep: 1, // 当前激活步骤索引（从0开始）
      steps: [
        { title: '步骤1', desc: '2023-10-01' },
        { title: '步骤2', desc: '2023-10-02' },
        { title: '步骤3', desc: '2023-10-03' }
      ]
    }
  }
}
</script>

属性说明：

  • options：步骤数据数组，包含 title（标题）和 desc（描述）。
  • active：当前激活步骤索引。

2. 自定义时间轴

如果需要更灵活样式（如左侧时间轴），可通过 CSS 自定义：

示例代码：

<template>
  <view class="timeline">
    <view v-for="(item, index) in timelineData" :key="index" class="timeline-item">
      <view class="timeline-dot"></view>
      <view class="timeline-content">
        <text class="timeline-time">{{ item.time }}</text>
        <text class="timeline-title">{{ item.title }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      timelineData: [
        { time: '2023-10-01', title: '事件1' },
        { time: '2023-10-02', title: '事件2' },
        { time: '2023-10-03', title: '事件3' }
      ]
    }
  }
}
</script>

<style>
.timeline {
  padding: 20rpx;
}
.timeline-item {
  display: flex;
  margin-bottom: 30rpx;
}
.timeline-dot {
  width: 20rpx;
  height: 20rpx;
  background: #007AFF;
  border-radius: 50%;
  margin-right: 20rpx;
  flex-shrink: 0;
}
.timeline-content {
  flex: 1;
}
.timeline-time {
  display: block;
  font-size: 24rpx;
  color: #999;
}
.timeline-title {
  font-size: 32rpx;
}
</style>

使用注意事项：

  1. 官方组件：需通过 HBuilderX 安装 uni-steps 组件（右键项目 → 安装组件）。
  2. 自定义样式：通过调整 CSS 实现不同布局（如垂直/水平时间轴）。
  3. 数据绑定：动态数据可通过 v-for 循环渲染。

根据需求选择合适方案，官方组件适合步骤流程，自定义代码可灵活控制样式和交互。

回到顶部