当前位置：首页 > uni-app

uniapp时间轴插件

2026-02-06 16:28:23uni-app

uniapp 时间轴插件推荐

在 uniapp 中实现时间轴效果，可以通过以下插件或方法实现：

1. 使用官方组件扩展 uniapp 官方未提供专门的时间轴组件，但可以通过 view、text 和 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>
        <text class="timeline-desc">{{ item.desc }}</text>
      </view>
    </view>
  </view>
</template>

<style>
.timeline {
  padding: 20rpx;
}
.timeline-item {
  display: flex;
  margin-bottom: 30rpx;
}
.timeline-dot {
  width: 20rpx;
  height: 20rpx;
  background-color: #007AFF;
  border-radius: 50%;
  margin-right: 20rpx;
}
.timeline-content {
  flex: 1;
}
.timeline-time {
  font-size: 24rpx;
  color: #999;
}
.timeline-title {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}
.timeline-desc {
  font-size: 26rpx;
  color: #666;
}
</style>

2. 第三方插件

uView UI：提供了 u-timeline 组件，支持多种样式和自定义配置。

安装方式：
```
npm install uview-ui
```

使用示例：

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

uni-ui：官方扩展组件库，包含 uni-timeline 组件。

安装方式：
```
npm install @dcloudio/uni-ui
```

使用示例：

<template>
  <uni-timeline>
    <uni-timeline-item 
      v-for="(item, index) in timelineData" 
      :key="index" 
      :title="item.title" 
      :timestamp="item.time" 
      :desc="item.desc">
    </uni-timeline-item>
  </uni-timeline>
</template>

3. 自定义组件 如果需要更复杂的时间轴效果，可以基于 scroll-view 和动画库（如 tween.js）实现动态时间轴。示例代码：

uniapp时间轴插件

// 在 script 中定义数据
export default {
  data() {
    return {
      timelineData: [
        { time: '2023-01-01', title: '事件1', desc: '描述内容1' },
        { time: '2023-02-01', title: '事件2', desc: '描述内容2' },
      ]
    }
  }
}