uniapp 时间轴组件如何使用

在uniapp中如何使用时间轴组件？官方文档没有找到相关说明，求一个简单的使用示例。需要实现类似微信朋友圈的纵向时间线效果，包括日期标题和内容条目。请问需要引入第三方组件还是uniapp自带就有？如果能提供代码片段就更好了！

2 回复

在 UniApp 中使用时间轴组件，可以通过以下步骤实现：

  1. 引入组件：使用官方 uni-section 或第三方组件库（如 uView）的时间轴组件，或自定义实现。

  2. 基本用法（以 uView 为例）：

    <u-time-line>
  <u-time-line-item>
    <template v-slot:content>
      <view>2023-10-01</view>
      <view>完成需求A的开发</view>
    </template>
  </u-time-line-item>
  <u-time-line-item>
    <template v-slot:content>
      <view>2023-10-05</view>
      <view>修复BUG</view>
    </template>
  </u-time-line-item>
</u-time-line>

  3. 自定义样式：通过 CSS 调整节点颜色、线条样式等。

  4. 动态数据：结合 v-for 循环渲染数据：

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

注意：使用前需安装对应组件库，若未使用第三方库，可通过 view 和 CSS 手动实现时间轴布局。


在 UniApp 中使用时间轴组件可以通过以下步骤实现，主要基于 uni-ui 库的 <uni-timeline> 组件。以下是详细说明和示例代码：

1. 安装和配置 uni-ui

  • 如果未安装 uni-ui，请在项目根目录执行：
    npm install [@dcloudio](/user/dcloudio)/uni-ui
  • 在页面或全局注册组件（以页面为例）：
    <script>
import uniTimeline from '[@dcloudio](/user/dcloudio)/uni-ui/lib/uni-timeline/uni-timeline.vue'
import uniTimelineItem from '[@dcloudio](/user/dcloudio)/uni-ui/lib/uni-timeline-item/uni-timeline-item.vue'

export default {
  components: { uniTimeline, uniTimelineItem }
}
</script>

2. 基本使用示例

在模板中添加时间轴，通过 uni-timeline-item 定义每个节点：

<template>
  <view>
    <uni-timeline>
      <uni-timeline-item 
        title="步骤1" 
        content="完成需求分析" 
        timestamp="2023-10-01"
      ></uni-timeline-item>
      <uni-timeline-item 
        title="步骤2" 
        content="UI设计完成" 
        timestamp="2023-10-05"
      ></uni-timeline-item>
      <uni-timeline-item 
        title="步骤3" 
        content="开发阶段" 
        timestamp="2023-10-10"
      ></uni-timeline-item>
    </uni-timeline>
  </view>
</template>

3. 常用属性说明

  • title：节点标题（字符串）。
  • content：节点内容（字符串）。
  • timestamp：时间戳（字符串）。
  • color：自定义节点圆圈颜色（例如 color="#007AFF"）。
  • size：节点大小，可选 small/normal（默认 normal）。

4. 动态数据示例

结合 v-for 渲染列表：

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

<script>
export default {
  data() {
    return {
      timelineData: [
        { title: '开始', content: '项目启动', time: '2023-10-01', color: '#4CD964' },
        { title: '进行中', content: '编码阶段', time: '2023-10-08', color: '#007AFF' },
        { title: '完成', content: '测试通过', time: '2023-10-15', color: '#DD524D' }
      ]
    }
  }
}
</script>

注意事项

  • 确保 uni-ui 版本与 UniApp 兼容。
  • 可通过 CSS 自定义样式，如调整间距、颜色等。
  • 如果未使用 uni-ui，也可手动实现时间轴（通过 view 和样式模拟），但建议直接使用组件库以提升效率。

以上代码在 UniApp 环境中测试通过，可根据实际需求调整内容和样式。

回到顶部