当前位置：首页 > uni-app

uniapp时间轴插件

2026-03-26 11:56:08uni-app

在UniApp中实现时间轴功能可以通过多种方式完成，包括使用现有插件或自定义组件。以下是几种常见的方法：

使用现有插件

UniApp社区中有一些开源的时间轴插件，可以直接集成到项目中。例如：

uniapp时间轴插件

uView UI：提供了时间轴组件（u-timeline），支持自定义节点内容和样式。
uni-ui：官方扩展组件库中的时间轴组件，适合基础需求。

自定义时间轴组件

如果现有插件不满足需求，可以手动实现一个时间轴组件。以下是一个简单的实现示例：

<template>
  <view class="timeline">
    <view v-for="(item, index) in items" :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>

<script>
export default {
  data() {
    return {
      items: [
        { time: '2023-01-01', title: '事件1', desc: '描述内容1' },
        { time: '2023-02-01', title: '事件2', desc: '描述内容2' }
      ]
    }
  }
}
</script>

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

使用第三方库

如果项目允许引入第三方库，可以使用基于Vue的时间轴组件库（如vue-timeline），通过HBuilderX的npm支持安装并集成到UniApp中。

uniapp时间轴插件

动态数据绑定

时间轴通常需要动态加载数据，可以通过API请求获取数据并更新时间轴内容：

methods: {
  fetchTimelineData() {
    uni.request({
      url: 'https://example.com/api/timeline',
      success: (res) => {
        this.items = res.data
      }
    })
  }
}