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

效果图

引言

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

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

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

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

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

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

组件定义

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

组件的 .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 组件框架的信息，请参阅微信小程序官方开发指南。