• timeline 时间轴
  • 属性说明
  • 示例
    • 代码示例

timeline 时间轴

解释： 时间轴组件，可配置时间轴内容，时间轴状态以及自定义图标。适用于信息展示，并可放置在页面的任何位置。

属性说明

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

• SWAN
• JS
• CSS
• JSON

 
 
 

  
  
  
<view class="wrap">
  
  
  
 <view class="content">
  
  
  
 <view class="card-panel">
  
  
  
 <view class="mode-title">
  
  
  
 <view class="mode-title-line-left"></view>
  
  
  
 <view class="mode-title-text">单条信息样式</view>
  
  
  
 <view class="mode-title-line-right"></view>
  
  
  
 </view>
  
  
  
 <view class="comp-wrap">
  
  
  
 <smt-timeline
  
  
  
 s-for="item, index in options"
  
  
  
 status="{{item.status}}"
  
  
  
 title="{{item.title}}"
  
  
  
 desc="{{item.desc}}"
  
  
  
 has-tail="{{item.hasTail}}"
  
  
  
 icon-color="{{item.iconColor}}"
  
  
  
 timeline-class="comp-timeline"
  
  
  
 desc-style="
  
  
  
 {{index === options.length - 1 ? 'font-weight: 700;' : ''}}
  
  
  
 {{item.status === 'error' ? 'color: #f7534f' : ''}}
  
  
  
 "
  
  
  
 >
  
  
  
 {{item.info}}
  
  
  
 </smt-timeline>
  
  
  
 </view>
  
  
  
 </view>
  
  
  
 <view class="card-panel">
  
  
  
 <view class="mode-title">
  
  
  
 <view class="mode-title-line-left"></view>
  
  
  
 <view class="mode-title-text">多条信息样式</view>
  
  
  
 <view class="mode-title-line-right"></view>
  
  
  
 </view>
  
  
  
 <view class="comp-wrap">
  
  
  
 <smt-timeline
  
  
  
 s-for="item, index in options2"
  
  
  
 status="{{item.status}}"
  
  
  
 desc="{{item.desc}}"
  
  
  
 has-tail="{{item.hasTail}}"
  
  
  
 icon-color="{{item.iconColor}}"
  
  
  
 timeline-class="comp-timeline"
  
  
  
 desc-style="{{
  
  
  
 index === options.length - 1
  
  
  
 ? 'font-weight: 700;'
  
  
  
 : ''
  
  
  
 }}"
  
  
  
 >
  
  
  
 <view
  
  
  
 class="comp-info-wrap"
  
  
  
 s-for="descInfo in item.descInfo"
  
  
  
 >
  
  
  
 <view class="comp-info">
  
  
  
 {{descInfo.info}}
  
  
  
 </view>
  
  
  
 <view class="comp-title">
  
  
  
 {{descInfo.title}}
  
  
  
 </view>
  
  
  
 </view>
  
  
  
 </smt-timeline>
  
  
  
 </view>
  
  
  
 </view>
  
  
  
 </view>
  
  
  
</view>