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

效果图

✨ 本文已更新：根据大家的反馈，我已经补充了完整的样式内容，感兴趣的朋友可以往下查看～

引言

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

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

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

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

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

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

组件定义

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

组件的 .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>

组件的.wxss文件：（补充样式）

.container {
  padding: 20rpx;
}

.item {
  position: relative;
  padding-bottom: 40rpx;
}

.item:last-child {
  padding-bottom: 0;
}

.item-tail {
  position: absolute;
  left: 8rpx;
  height: 100%;
  border-left: 3rpx solid #c8c9cc;
}

.item:last-child .item-tail {
  border-left: none;
}

.item-node {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: -12rpx;
  font-size: 28rpx;
}

.item-wrapper {
  position: relative;
  padding-left: 56rpx;
  top: -10rpx;
}

.item-news {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  padding: 10rpx 20rpx;
  margin-bottom: 15rpx;
  border-radius: 50rpx;
}

.item-timestamp {
  font-size: 30rpx;
  color: #909399;
}

.item-mark {
  max-width: 100rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 24rpx;
  border: 1rpx solid #c8c9cc;
  padding: 0 10rpx;
  border-radius: 50rpx;
  color: #c8c9cc;
}

.item-content {
  background-color: white;
  padding: 20rpx;
  border-radius: 15rpx;
  font-size: 28rpx;
  color: #333333;
}

/*shape circle | square*/
.circle {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  padding: 5rpx;
}

.square {
  width: 36rpx;
  height: 36rpx;
  border-radius: 5rpx;
  padding: 5rpx;
}

/*status success | error | warning | info*/
.success {
  color: white;
  background-color: #19be6b;
  box-shadow: 0 0 5rpx 5rpx #71d5a1;
}

.error {
  color: white;
  background-color: #ed3f14;
  box-shadow: 0 0 5rpx 5rpx #fab6b5;
}

.warning {
  color: white;
  background-color: #e6a23c;
  box-shadow: 0 0 5rpx 5rpx #f5dab1;
}

.info {
  color: white;
  background-color: #909399;
  box-shadow: 0 0 5rpx 5rpx #c8c9cc;
}

组件使用

要使用该组件，首先需要在 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>

补充样式：

.container {
  padding: 20rpx;
}


.row-operate {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  border-top: 1rpx solid #f1f1f1;
  margin-top: 20rpx;
  padding-top: 20rpx;
}

.row-operate view {
  padding: 12rpx 30rpx;
  font-size: 30rpx;
  color: white;
  border-radius: 10rpx;
}

.row-operate view:nth-child(1) {
  background-color: #ff9900;
}

.row-operate view:nth-child(2) {
  background-color: #2979ff;
}

.row-operate view:nth-child(3) {
  background-color: #19be6b;
}

数据结构与属性说明

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: '内容五'}
]

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

参数	说明	可选值	类型	默认值
activities	显示的数据	—	array	—
shape	时间轴点形状	circle / square	string	circle
ordinal	是否显示序号	—	boolean	true
reverse	是否倒序排列	—	boolean	false

总结

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

拓展阅读

关于动态 Slot 实现：

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

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