qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

Timeline 时间轴

垂直展示一系列的时间流信息。

使用指南

在 Taro 文件中引入组件

import { AtTimeline } from 'taro-ui-vue3'

组件依赖的样式文件（仅按需引用时需要）

@import "taro-ui-vue3/dist/style/components/timeline.scss";

用法

<AtTimeline 
  :items="[
    { title: '刷牙洗脸' }, 
    { title: '吃早餐' }, 
    { title: '上班' }, 
    { title: '睡觉' }
  ]"
>
</AtTimeline>

自定义默认图标颜色、自定义图标

<AtTimeline 
  :items="[
    { title: '刷牙洗脸' }, 
    { title: '吃早餐', color: 'green' }, 
    { title: '上班', color: 'red' }, 
    { title: '睡觉', color: 'yellow' }
  ]"
>
</AtTimeline>

<AtTimeline 
  :items="[
    { title: '刷牙洗脸', icon: 'check-circle' }, 
    { title: '吃早餐', icon: 'clock' }, 
    { title: '上班', icon: 'clock' }, 
    { title: '睡觉', icon: 'clock' }
  ]"
>
</AtTimeline>

标记最后一个为幽灵节点（即时间轴未完成，还在记录过程中）

<AtTimeline 
  pending 
  :items="[
    { title: '刷牙洗脸' }, 
    { title: '吃早餐' }, 
    { title: '上班' }, 
    { title: '睡觉' }
  ]"
>
</AtTimeline>

添加更多内容

<AtTimeline 
  pending 
  :items="[
    { title: '刷牙洗脸', content: ['大概8:00'], icon: 'check-circle' }, 
    { title: '吃早餐', content: ['牛奶+面包', '餐后记得吃药'], icon: 'clock' }, 
    { title: '上班', content: ['查看邮件', '写PPT', '发送PPT给领导'], icon: 'clock' }, 
    { title: '睡觉', content: ['不超过23:00'], icon: 'clock' }
  ]"
>
</AtTimeline>

Timeline 参数

参数说明类型可选值默认值
pending最后一项是否为未完成态Boolean-false
items需展示的内容。数组对象参数参考下文 itemArray Of Object-[]

items object 字段详解

参数说明类型可选值默认值
title标题String必填-
content子项内容Array-[]
icon自定义iconString参考icon组件-
coloricon颜色Stringgreen/red/yellowblue