Timeline 时间轴

用于展现时间流信息。

使用指南

在 page.json 中引入组件

  1. {
  2.     "navigationBarTitleText": "Timeline",
  3.     "usingComponents": {
  4.         "wux-icon": "../../dist/icon/index",
  5.         "wux-timeline": "../../dist/timeline/index",
  6.         "wux-timeline-item": "../../dist/timeline-item/index"
  7.     }
  8. }

示例

  1. <view class="page">
  2.     <view class="page__hd">
  3.         <view class="page__title">Timeline</view>
  4.         <view class="page__desc">时间轴</view>
  5.     </view>
  6.     <view class="page__bd page__bd_spacing">
  7.         <view class="sub-title">Default</view>
  8.         <wux-timeline>
  9.             <wux-timeline-item content="2018-10-24 v1.0.0" />
  10.             <wux-timeline-item content="2018-10-24 v1.0.0" />
  11.             <wux-timeline-item content="2018-10-24 v1.0.0" />
  12.             <wux-timeline-item content="2018-10-24 v1.0.0" />
  13.         </wux-timeline>
  14.         <view class="sub-title">Position = alternate</view>
  15.         <wux-timeline position="alternate">
  16.             <wux-timeline-item content="2018-10-24 v1.0.0" />
  17.             <wux-timeline-item content="2018-10-24 v1.0.0" />
  18.             <wux-timeline-item content="2018-10-24 v1.0.0" />
  19.             <wux-timeline-item content="2018-10-24 v1.0.0" />
  20.         </wux-timeline>
  21.         <view class="sub-title">Position = right</view>
  22.         <wux-timeline position="right">
  23.             <wux-timeline-item content="2018-10-24 v1.0.0" />
  24.             <wux-timeline-item content="2018-10-24 v1.0.0" />
  25.             <wux-timeline-item content="2018-10-24 v1.0.0" />
  26.             <wux-timeline-item content="2018-10-24 v1.0.0" />
  27.         </wux-timeline>
  28.         <view class="sub-title">Pending</view>
  29.         <wux-timeline pending>
  30.             <wux-timeline-item content="2018-10-24 v1.0.0" />
  31.             <wux-timeline-item content="2018-10-24 v1.0.0" />
  32.             <wux-timeline-item content="2018-10-24 v1.0.0" />
  33.             <wux-timeline-item content="2018-10-24 v1.0.0" />
  34.         </wux-timeline>
  35.         <view class="sub-title">Slot</view>
  36.         <wux-timeline>
  37.             <wux-timeline-item>
  38.                 <view>2018-10-24 v1.0.0</view>
  39.             </wux-timeline-item>
  40.             <wux-timeline-item custom>
  41.                 <wux-icon slot="dot" type="ios-time" size="23" />
  42.                 <view>2018-10-24 v1.0.0</view>
  43.             </wux-timeline-item>
  44.             <wux-timeline-item dotStyle="border-color: #33cd5f; color: #33cd5f">
  45.                 <view>2018-10-24 v1.0.0</view>
  46.             </wux-timeline-item>
  47.             <wux-timeline-item dotStyle="border-color: #ef473a; color: #ef473a">
  48.                 <view>2018-10-24 v1.0.0</view>
  49.             </wux-timeline-item>
  50.         </wux-timeline>
  51.     </view>
  52. </view>

视频演示

Timeline

API

Timeline props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-timeline
pending boolean 最后一个节点是否为幽灵节点 false
position string 时间轴和内容的相对位置，可选值为 left、alternate、right left

Timeline externalClasses

名称 描述
wux-class 根节点样式类

TimelineItem props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-timeline-item
content string 内容 -
dotStyle string,object 时间轴点样式 -
custom boolean 是否自定义时间轴点 false

TimelineItem slot

名称 描述
- 自定义内容
dot 自定义时间轴点，当 custom 为 true 时才生效

TimelineItem externalClasses

名称 描述
wux-class 根节点样式类