微信小程序：轻松实现时间轴组件

效果图

引言

老板: “我们公司是做基金的，用户都在买买买，可他们的钱去了哪里？没有时间轴，用户会不会觉得自己的钱瞬移了？”

你: “哈哈，确实！时间轴就像用户的投资地图，不然他们可能觉得钱被外星人劫走了。”

老板: “没错！我们得在时间轴上标清‘资金到账’、‘收益结算’这些节点，这样用户就不会担心他们的钱去买彩票了。”

你: “放心吧，老板，我马上设计一个时间轴，让用户一看就明白他们的钱在干什么，还能时不时地笑一笑！”

老板: “好，赶紧行动，不然用户要开始给我们寄失踪报告了！”

废话不多说，我们直接开始吧！！！

组件定义

以下代码为时间轴组件的实现，详细注释在代码中。如果有任何疑问，欢迎在评论区留言讨论，或者联系我获取完整案例。

组件的 .js 文件：

/*可视化地呈现时间流信息*/
Component({
   
  options: {
   
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: {
   
    activities: {
    // 时间轴列表
      type: Array,
      value: []
    },
    shape: {
    // 时间轴形状
      type: String,
      value: 'circle' // circle | square
    },
    ordinal: {
    // 是否显示序号
      type: Boolean,
      value: true
    },
    reverse: {
    // 是否倒序排列
      type: Boolean,
      value: false
    }
  },
  lifetimes: {
   
    attached() {
   
      // 是否倒序排列操作数据
      const {
   reverse, activities} = this.data
      if (!reverse) return
      this.setData({
   
        activities: activities.reverse()
      })
    }
  }
})

组件的.wxml文件：

<view class="container">
  <view class="item" wx:for="{
    {activities}}" wx:key="item">
    <view class="item-tail"></view>
    <view class="item-node {
    {shape}} {
    {item.status}}">
      <block wx:if="{
    {ordinal}}">{
  {index + 1}}</block>
    </view>
    <view class="item-wrapper">
      <view class="item-news">
        <view class="item-timestamp">{
  {item.date}}</view>
        <view class="item-mark">收益结算</view>
      </view>
      <view class="item-content">
        <view>{
  {item.content}}</view>
        <!--动态slot的实现方式-->
        <slot name="operate{
    {index}}"></slot>
      </view>
    </view>
  </view>
</view>

组件使用

要使用该组件，首先需要在 app.json 或 index.json 中引用组件：

"usingComponents": {
   
    "eod-timeline": "/components/Timeline/Timeline"
}

然后你可以通过以下方式进行基本使用：

<eod-timeline activities="{
    {dataList}}" ordinal="{
    {true}}"></eod-timeline>

如果需要结合插槽动态显示操作记录，可以这样实现：

<eod-timeline activities="{
    {dataList}}" ordinal="{
    {true}}">
    <!--动态slot的实现方式-->
    <view wx:for="{
    {dataList}}" wx:for-index="idx" wx:key="idx" slot="operate{
    {idx}}">
      <view class="row-operate">
        <view>操作记录</view>
        <view>收益记录</view>
        <view>动账记录</view>
      </view>
    </view>
</eod-timeline>

数据结构与属性说明

dataList 数据结构示例如下：

dataList:[
  {
   date: '2023-05-26 12:04:14', status: 'info', content: '内容一'},
  {
   date: '2023-05-25 12:04:14', status: 'success', content: '内容二'},
  {
   date: '2023-05-24 12:04:14', status: 'success', content: '内容三'},
  {
   date: '2023-05-23 12:04:14', status: 'error', content: '内容四'},
  {
   date: '2023-05-22 12:04:14', status: 'warning', content: '内容五'}
]

组件的属性配置如下表所示：

总结

这个时间轴组件提供了一个简单易用的方式来展示事件的时间顺序。组件支持定制形状、序号显示以及正序或倒序排列，同时允许通过插槽自定义内容，增强了组件的灵活性。代码中有详细注释，方便理解和修改。如果需要更详细的案例或有任何疑问，请在评论区留言。希望这篇文章对你有所帮助！

拓展阅读

关于动态 Slot 实现：

由于动态 slot 目前仅可用于 glass-easel 组件框架，而该框架仅可用于 Skyline 渲染引擎，因此这些特性也同样受此限制。如果需要在非 glass-easel 组件框架中实现动态 slot，请参考上文标记了 <!--动态slot的实现方式--> 的代码段。

如需了解更多关于 glass-easel 组件框架的信息，请参阅微信小程序官方开发指南。